3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 // Note that these are all defined as panel configs, rather than instantiated
9 // as panel objects. You could just as easily do this instead:
11 // var absolute = new Ext.Panel({ ... });
13 // However, by passing configs into the main container instead of objects, we can defer
14 // layout AND object instantiation until absolutely needed. Since most of these panels
15 // won't be shown by default until requested, this will save us some processing
16 // time up front when initially rendering the page.
18 // Since all of these configs are being added into a layout container, they are
19 // automatically assumed to be panel configs, and so the xtype of 'panel' is
20 // implicit. To define a config of some other type of component to be added into
21 // the layout, simply provide the appropriate xtype config explicitly.
24 * ================ Start page config =======================
26 // The default start page, also a simple example of a FitLayout.
31 bodyStyle: 'padding:25px',
32 contentEl: 'start-div' // pull existing content from the page
36 * ================ AbsoluteLayout config =======================
40 title: 'Absolute Layout',
43 bodyStyle: 'padding:15px;',
52 html: 'Positioned at x:50, y:50'
57 html: 'Positioned at x:125, y:125'
62 * ================ AccordionLayout config =======================
65 id: 'accordion-panel',
66 title: 'Accordion Layout',
68 bodyBorder: false, // useful for accordion containers since the inner panels have borders already
69 bodyStyle: 'background-color:#DFE8F6', // if all accordion panels are collapsed, this looks better in this layout
70 defaults: {bodyStyle: 'padding:15px'},
72 title: 'Introduction',
73 tools: [{id:'gear'},{id:'refresh'}],
74 html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'
76 title: 'Basic Content',
77 html: '<br /><p>More content. Open the third panel for a customized look and feel example.</p>',
80 text: 'Show Next Panel',
82 Ext.getCmp('acc-custom').expand(true);
87 title: 'Custom Panel Look and Feel',
88 cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
89 html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
94 * ================ AnchorLayout config =======================
98 title: 'Anchor Layout',
100 defaults: {bodyStyle: 'padding:15px'},
105 html: '<p>Width = 50% of the container</p>'
110 html: '<p>Width = container width - 100 pixels</p>'
114 html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
119 * ================ BorderLayout config =======================
123 title: 'Border Layout',
132 bodyStyle: 'padding:15px'
141 html: '<p>Footer content</p>'
151 html: '<p>Secondary content like navigation links could go here</p>'
153 title: 'Main Content',
157 html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
162 * ================ CardLayout config (TabPanel) =======================
164 // Note that the TabPanel component uses an internal CardLayout -- it is not
165 // something you have to explicitly configure. However, it is still a perfect
166 // example of how this layout style can be used in a complex component.
169 id: 'card-tabs-panel',
170 plain: true, //remove the header border
172 defaults: {bodyStyle: 'padding:15px'},
175 html: 'This is tab 1 content.'
178 html: 'This is tab 2 content.'
181 html: 'This is tab 3 content.'
185 // This is a fake CardLayout navigation function. A real implementation would
186 // likely be more sophisticated, with logic to validate navigation flow. It will
187 // be assigned next as the handling function for the buttons in the CardLayout example.
188 var cardNav = function(incr){
189 var l = Ext.getCmp('card-wizard-panel').getLayout();
190 var i = l.activeItem.id.split('card-')[1];
191 var next = parseInt(i, 10) + incr;
192 l.setActiveItem(next);
193 Ext.getCmp('card-prev').setDisabled(next==0);
194 Ext.getCmp('card-next').setDisabled(next==2);
198 * ================ CardLayout config (Wizard) =======================
201 id:'card-wizard-panel',
202 title: 'Card Layout (Wizard)',
205 bodyStyle: 'padding:15px',
206 defaults: {border:false},
209 text: '« Previous',
210 handler: cardNav.createDelegate(this, [-1]),
214 text: 'Next »',
215 handler: cardNav.createDelegate(this, [1])
219 html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
222 html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'
225 html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
230 * ================ ColumnLayout config =======================
234 title: 'Column Layout',
236 bodyStyle: 'padding:5px',
237 defaults: {bodyStyle:'padding:15px'},
239 title: 'Width = 0.25',
241 html: '<p>This is some short content.</p>'
243 title: 'Width = 0.75',
245 html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
247 title: 'Width = 250px',
249 html: 'Not much here!'
254 * ================ FitLayout config =======================
261 title: 'Inner Panel',
262 html: '<p>This panel is fit within its container.</p>',
263 bodyStyle: 'margin:15px',
269 * ================ FormLayout config =======================
271 // NOTE: While you can create a basic Panel with layout:'form', practically
272 // you should usually use a FormPanel to also get its form-specific functionality.
273 // Note that the layout config is not required on FormPanels.
275 xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
278 title: 'Form Layout',
279 bodyStyle: 'padding:15px',
289 defaultType: 'textfield',
291 fieldLabel: 'First Name',
295 fieldLabel: 'Last Name',
298 fieldLabel: 'Company',
306 buttons: [{text: 'Save'},{text: 'Cancel'}]
310 * ================ TableLayout config =======================
314 title: 'Table Layout',
320 bodyStyle:'padding:15px 20px'
323 title: 'Lots of Spanning',
324 html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
327 title: 'Basic Table Cell',
328 html: '<p>Basic panel in a table cell.</p>',
329 cellId: 'basic-cell',
330 cellCls: 'custom-cls'
332 html: '<p>Plain panel</p>'
334 title: 'Another Cell',
335 html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
339 html: 'Plain cell spanning two columns',
342 title: 'More Column Spanning',
343 html: '<p>Spanning three columns.</p>',
346 title: 'Spanning All Columns',
347 html: '<p>Spanning all columns.</p>',
354 * ================ VBoxLayout config =======================
358 title: 'vBox Layout',
383 * ================ HBoxLayout config =======================
387 title: 'hBox Layout',