clients/sample_controls/controllers/files.js clients/sample_controls/english.lproj/collections_page.js @@ -1,3 +1,14 @@ -.sc-view.control-tab .tiled-sample { - overflow-x: auto; +.tiled-sample { } + +.control-sample { + border-right: 1px #ccc solid ; + overflow: hidden; +} + +.control-sample > .sample-label { + text-align: center; + line-height: 30px; + font-weight: bold; +} + clients/sample_controls/english.lproj/controls_page.css @@ -11,13 +11,13 @@ SampleControls.controlsPage = SC.Page.create({ radioViewValue: "Item1", - mainView: SC.View.design({ + mainView: SC.ScrollView.design({ - styleClass: ['control-tab'], + styleClass: 'control-tab', layout: { left:0, right:0, bottom:0, top: 12 }, + hasVerticalScroller: NO, - childViews: [ - tile().title('SC.ButtonView').sample(SC.ButtonView, { + contentView: tile().title('SC.ButtonView').sample(SC.ButtonView, { theme: 'regular', title: 'Regular' }, { @@ -445,9 +445,5 @@ SampleControls.controlsPage = SC.Page.create({ allowsEmptySelection: YES, allowsMultipleSelection: YES }) - - - ] - }) - - }); \ No newline at end of file + }) + }); \ No newline at end of file clients/sample_controls/english.lproj/controls_page.js @@ -3,7 +3,7 @@ // copyright 2008 Sprout Systems, Inc. // ========================================================================== /*global SampleControls tile */ -/* + require('views/control_sample'); @@ -20,6 +20,7 @@ SampleControls.mainPage = SC.Page.create({ items: [ { title: "Welcome", value: "welcome" }, { title: "Controls", value: "SampleControls.controlsPage.mainView" }, + { title: "Collections", value: "SampleControls.collectionsPage.mainView" }, { title: "Form", value: "SampleControls.formsPage.mainView" }, { title: "Icons", value: "SampleControls.iconsPage.mainView" } ], @@ -43,18 +44,4 @@ SampleControls.mainPage = SC.Page.create({ }); -*/ - -// SproutCore ViewBuilder Design Format v1.0 -// WARNING: This file is automatically generated. DO NOT EDIT. Changes you -// make to this file will be lost. - -SampleControls.mainPage = SC.Page.design({mainPane: SC.MainPane.design({childViews: [SC.TabView.design({nowShowing: "welcome",items: [{title: "Welcome",value: "welcome"},{title: "Controls",value: "SampleControls.controlsPage.mainView"},{title: "Form",value: "SampleControls.formsPage.mainView"},{title: "Icons",value: "SampleControls.iconsPage.mainView"}],itemTitleKey: "title",itemValueKey: "value",userDefaultKey: "mainPane",rootElementPath: [0]})]}),welcome: SC.LabelView.design({styleClass: ["sc-view","sc-label-view","welcome-tab"],value: "<h1>Sample Controls</h1><p>SproutCore comes bundled with a wide array of controls that you can use in your own applications. Most of these controls can be created very easily using the built-in view helper functions. Consult the source code of this application for samples code to use in your own application.</p>",escapeHTML: NO,rootElementPath: [0]}),pageName: "SampleControls.mainPage"}); - - -// SproutCore ViewBuilder Localization Format v1.0 -// WARNING: This file is automatically generated. DO NOT EDIT. Changes you -// make to this file will be lost. - -SampleControls.mainPage.loc(SC.Page.localization({mainPane: SC.MainPane.localization({childViews: [SC.TabView.localization({layout: {left: 12,right: 12,top: 12,bottom: 12}})]}, '<div class="sc-pane sc-main-pane sc-view" style="left: 0px; right: 0px; top: 0px; bottom: 0px; "><div class="sc-view sc-tab-view" style="left: 12px; right: 12px; top: 12px; bottom: 12px; "><div class="sc-view sc-container-view" style="left: 0px; right: 0px; top: 11px; bottom: 0px; "></div><div class="sc-view sc-segmented-view sc-layout-horizontal sc-regular-size" style="left: 0px; right: 0px; top: 0px; height: 23px; "><a href="javascript:;" class="sc-segment sc-first-segment sel" role="tab" style="width: 0px; margin-left: 0px; "><span class="sc-button-inner"><label class="sc-button-label">Welcome</label></span></a><a href="javascript:;" class="sc-segment sc-middle-segment" role="tab" style="width: 0px; margin-left: 0px; "><span class="sc-button-inner"><label class="sc-button-label">Controls</label></span></a><a href="javascript:;" class="sc-segment sc-middle-segment" role="tab" style="width: 0px; margin-left: 0px; "><span class="sc-button-inner"><label class="sc-button-label">Form</label></span></a><a href="javascript:;" class="sc-segment sc-last-segment" role="tab" style="width: 0px; margin-left: 0px; "><span class="sc-button-inner"><label class="sc-button-label">Icons</label></span></a></div></div></div>'),welcome: SC.LabelView.localization({}, '<div class="sc-view sc-label-view welcome-tab sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; text-align: left; font-weight: normal; "><h1>Sample Controls</h1><p>SproutCore comes bundled with a wide array of controls that you can use in your own applications. Most of these controls can be created very easily using the built-in view helper functions. Consult the source code of this application for samples code to use in your own application.</p></div>')})); clients/sample_controls/english.lproj/main_page.js @@ -80,10 +80,11 @@ SampleControls.TiledSampleView = SC.View.extend({ view.adjust('left', left) ; left += view.get('frame').width ; }, this); + this.adjust('width', left); return ret ; }, - layout: { left: 0, top: 0, right: 0, bottom: 0 }, + layout: { left: 0, top: 0, bottom: 0 }, styleClass: 'tiled-sample' clients/sample_controls/views/control_sample.js clients/sample_controls/english.lproj/control_sample.css ff861019cbf48c30086391afe4ca557a2a54880b Charles Jolley charles@sproutit.com http://github.com/sproutit/sproutcore-samples/commit/280359ee0668202c03c3c475ffc22f626cd626ee 280359ee0668202c03c3c475ffc22f626cd626ee 2008-12-31T11:57:52-08:00 2008-12-31T11:57:52-08:00 Collections page for views 3154ea55016f728ed0073abe9236b0efd697d256 Charles Jolley charles@sproutit.com