Here is some accordion content. Click on one of the other bars below for more.
' - },{ - title: 'Basic Content', - html: 'More content. Open the third panel for a customized look and feel example.
', - items: { - xtype: 'button', - text: 'Show Next Panel', - handler: function(){ - Ext.getCmp('acc-custom').expand(true); - } - } - },{ - id: 'acc-custom', - title: 'Custom Panel Look and Feel', - cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class - html: '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.
' - }] -}; - -/* - * ================ AnchorLayout config ======================= - */ -var anchor = { - id:'anchor-panel', - title: 'Anchor Layout', - layout:'anchor', - defaults: {bodyStyle: 'padding:15px'}, +/*! + * Ext JS Library 3.0.3 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +// +// Note that these are all defined as panel configs, rather than instantiated +// as panel objects. You could just as easily do this instead: +// +// var absolute = new Ext.Panel({ ... }); +// +// However, by passing configs into the main container instead of objects, we can defer +// layout AND object instantiation until absolutely needed. Since most of these panels +// won't be shown by default until requested, this will save us some processing +// time up front when initially rendering the page. +// +// Since all of these configs are being added into a layout container, they are +// automatically assumed to be panel configs, and so the xtype of 'panel' is +// implicit. To define a config of some other type of component to be added into +// the layout, simply provide the appropriate xtype config explicitly. +// +/* + * ================ Start page config ======================= + */ +// The default start page, also a simple example of a FitLayout. +var start = { + id: 'start-panel', + title: 'Start Page', + layout: 'fit', + bodyStyle: 'padding:25px', + contentEl: 'start-div' // pull existing content from the page +}; + +/* + * ================ AbsoluteLayout config ======================= + */ +var absolute = { + id: 'absolute-panel', + title: 'Absolute Layout', + layout: 'absolute', + defaults: { + bodyStyle: 'padding:15px;', + width: 200, + height: 100, + frame: true + }, + items:[{ + title: 'Panel 1', + x: 50, + y: 50, + html: 'Positioned at x:50, y:50' + },{ + title: 'Panel 2', + x: 125, + y: 125, + html: 'Positioned at x:125, y:125' + }] +}; + +/* + * ================ AccordionLayout config ======================= + */ +var accordion = { + id: 'accordion-panel', + title: 'Accordion Layout', + layout: 'accordion', + bodyBorder: false, // useful for accordion containers since the inner panels have borders already + bodyStyle: 'background-color:#DFE8F6', // if all accordion panels are collapsed, this looks better in this layout + defaults: {bodyStyle: 'padding:15px'}, + items: [{ + title: 'Introduction', + tools: [{id:'gear'},{id:'refresh'}], + html: 'Here is some accordion content. Click on one of the other bars below for more.
' + },{ + title: 'Basic Content', + html: 'More content. Open the third panel for a customized look and feel example.
', + items: { + xtype: 'button', + text: 'Show Next Panel', + handler: function(){ + Ext.getCmp('acc-custom').expand(true); + } + } + },{ + id: 'acc-custom', + title: 'Custom Panel Look and Feel', + cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class + html: '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.
' + }] +}; + +/* + * ================ AnchorLayout config ======================= + */ +var anchor = { + id:'anchor-panel', + title: 'Anchor Layout', + layout:'anchor', + defaults: {bodyStyle: 'padding:15px'}, + items: [{ + title: 'Panel 1', + height: 100, + anchor: '50%', + html: 'Width = 50% of the container
' + },{ + title: 'Panel 2', + height: 100, + anchor: '-100', + html: 'Width = container width - 100 pixels
' + },{ + title: 'Panel 3', + anchor: '-10, -262', + html: 'Width = container width - 10 pixels
Height = container height - 262 pixels
' + }] +}; + +/* + * ================ BorderLayout config ======================= + */ +var border = { + id:'border-panel', + title: 'Border Layout', + layout: 'border', + bodyBorder: false, + defaults: { + collapsible: true, + split: true, + animFloat: false, + autoHide: false, + useSplitTips: true, + bodyStyle: 'padding:15px' + }, + items: [{ + title: 'Footer', + region: 'south', + height: 150, + minSize: 75, + maxSize: 250, + cmargins: '5 0 0 0', + html: 'Footer content
' + },{ + title: 'Navigation', + region:'west', + floatable: false, + margins: '5 0 0 0', + cmargins: '5 5 0 0', + width: 175, + minSize: 100, + maxSize: 250, + html: 'Secondary content like navigation links could go here
' + },{ + title: 'Main Content', + collapsible: false, + region: 'center', + margins: '5 0 0 0', + html: 'This is where the main content would go
' + }] +}; + +/* + * ================ CardLayout config (TabPanel) ======================= + */ +// Note that the TabPanel component uses an internal CardLayout -- it is not +// something you have to explicitly configure. However, it is still a perfect +// example of how this layout style can be used in a complex component. +var cardTabs = { + xtype: 'tabpanel', + id: 'card-tabs-panel', + plain: true, //remove the header border + activeItem: 0, + defaults: {bodyStyle: 'padding:15px'}, + items:[{ + title: 'Tab 1', + html: 'This is tab 1 content.' + },{ + title: 'Tab 2', + html: 'This is tab 2 content.' + },{ + title: 'Tab 3', + html: 'This is tab 3 content.' + }] +}; + +// This is a fake CardLayout navigation function. A real implementation would +// likely be more sophisticated, with logic to validate navigation flow. It will +// be assigned next as the handling function for the buttons in the CardLayout example. +var cardNav = function(incr){ + var l = Ext.getCmp('card-wizard-panel').getLayout(); + var i = l.activeItem.id.split('card-')[1]; + var next = parseInt(i) + incr; + l.setActiveItem(next); + Ext.getCmp('card-prev').setDisabled(next==0); + Ext.getCmp('card-next').setDisabled(next==2); +}; + +/* + * ================ CardLayout config (Wizard) ======================= + */ +var cardWizard = { + id:'card-wizard-panel', + title: 'Card Layout (Wizard)', + layout:'card', + activeItem: 0, + bodyStyle: 'padding:15px', + defaults: {border:false}, + bbar: ['->', { + id: 'card-prev', + text: '« Previous', + handler: cardNav.createDelegate(this, [-1]), + disabled: true + },{ + id: 'card-next', + text: 'Next »', + handler: cardNav.createDelegate(this, [1]) + }], + items: [{ + id: 'card-0', + html: 'Step 1 of 3
Please click the "Next" button to continue...
' + },{ + id: 'card-1', + html: 'Step 2 of 3
Almost there. Please click the "Next" button to continue...
' + },{ + id: 'card-2', + html: 'Step 3 of 3 - Complete
' + }] +}; + +/* + * ================ ColumnLayout config ======================= + */ +var column = { + id:'column-panel', + title: 'Column Layout', + layout: 'column', + bodyStyle: 'padding:5px', + defaults: {bodyStyle:'padding:15px'}, + items: [{ + title: 'Width = 0.25', + columnWidth: 0.25, + html: 'This is some short content.
' + },{ + title: 'Width = 0.75', + columnWidth: 0.75, + html: 'This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
' + },{ + title: 'Width = 250px', + width: 250, + html: 'Not much here!' + }] +}; + +/* + * ================ FitLayout config ======================= + */ +var fit = { + id: 'fit-panel', + title: 'Fit Layout', + layout: 'fit', + items: { + title: 'Inner Panel', + html: 'This panel is fit within its container.
', + bodyStyle: 'margin:15px', + border: false + } +}; + +/* + * ================ FormLayout config ======================= + */ +// NOTE: While you can create a basic Panel with layout:'form', practically +// you should usually use a FormPanel to also get its form-specific functionality. +// Note that the layout config is not required on FormPanels. +var form = { + xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it + id: 'form-panel', + labelWidth: 75, + title: 'Form Layout', + bodyStyle: 'padding:15px', + width: 350, + labelPad: 20, + layoutConfig: { + labelSeparator: '' + }, + defaults: { + width: 230, + msgTarget: 'side' + }, + defaultType: 'textfield', + items: [{ + fieldLabel: 'First Name', + name: 'first', + allowBlank:false + },{ + fieldLabel: 'Last Name', + name: 'last' + },{ + fieldLabel: 'Company', + name: 'company' + },{ + fieldLabel: 'Email', + name: 'email', + vtype:'email' + } + ], + buttons: [{text: 'Save'},{text: 'Cancel'}] +}; + +/* + * ================ TableLayout config ======================= + */ +var table = { + id: 'table-panel', + title: 'Table Layout', + layout: 'table', + layoutConfig: { + columns: 4 + }, + defaults: { + bodyStyle:'padding:15px 20px' + }, + items: [{ + title: 'Lots of Spanning', + html: 'Row spanning.
Row spanning.
Row spanning.
Row spanning.
Row spanning.
Row spanning.
', + rowspan: 3 + },{ + title: 'Basic Table Cell', + html: 'Basic panel in a table cell.
', + cellId: 'basic-cell', + cellCls: 'custom-cls' + },{ + html: 'Plain panel
' + },{ + title: 'Another Cell', + html: 'Row spanning.
Row spanning.
Row spanning.
Row spanning.
', + width: 300, + rowspan: 2 + },{ + html: 'Plain cell spanning two columns', + colspan: 2 + },{ + title: 'More Column Spanning', + html: 'Spanning three columns.
', + colspan: 3 + },{ + title: 'Spanning All Columns', + html: 'Spanning all columns.
', + colspan: 4 + }] +}; + + +/* + * ================ VBoxLayout config ======================= + */ +var vbox = { + id: 'vbox-panel', + title: 'vBox Layout', + layout: { + type: 'vbox', + pack: 'start', + align: 'stretch' + }, + defaults: { + frame: true + }, items: [{ title: 'Panel 1', - height: 100, - anchor: '50%', - html: 'Width = 50% of the container
' - },{ + flex: 1, + html: 'flex : 1' + }, { title: 'Panel 2', height: 100, - anchor: '-100', - html: 'Width = container width - 100 pixels
' - },{ + html: 'height: 100' + }, { title: 'Panel 3', - anchor: '-10, -262', - html: 'Width = container width - 10 pixels
Height = container height - 262 pixels
' - }] -}; - -/* - * ================ BorderLayout config ======================= - */ -var border = { - id:'border-panel', - title: 'Border Layout', - layout:'border', - bodyBorder: false, - defaults: { - collapsible: true, - split: true, - animFloat: false, - autoHide: false, - useSplitTips: true, - bodyStyle: 'padding:15px' - }, - items: [{ - title: 'Footer', - region: 'south', - height: 150, - minSize: 75, - maxSize: 250, - cmargins: '5 0 0 0', - html: 'Footer content
' - },{ - title: 'Navigation', - region:'west', - floatable: false, - margins: '5 0 0 0', - cmargins: '5 5 0 0', - width: 175, - minSize: 100, - maxSize: 250, - html: 'Secondary content like navigation links could go here
' - },{ - title: 'Main Content', - collapsible: false, - region:'center', - margins: '5 0 0 0', - html: 'This is where the main content would go
' - }] -}; - -/* - * ================ CardLayout config (TabPanel) ======================= - */ -// Note that the TabPanel component uses an internal CardLayout -- it's not -// something you have to explicitly configure. However, it's still a perfect -// example of how this layout style can be used in a complex component. -var cardTabs = { - xtype: 'tabpanel', - id: 'card-tabs-panel', - plain: true, //remove the header border - activeItem: 0, - defaults: {bodyStyle: 'padding:15px'}, - items:[{ - title: 'Tab 1', - html: 'This is tab 1 content.' - },{ - title: 'Tab 2', - html: 'This is tab 2 content.' - },{ - title: 'Tab 3', - html: 'This is tab 3 content.' - }] -}; - -// This is a fake CardLayout navigation function. A real implementation would -// likely be more sophisticated, with logic to validate navigation flow. It will -// be assigned next as the handling function for the buttons in the CardLayout example. -var cardNav = function(incr){ - var l = Ext.getCmp('card-wizard-panel').getLayout(); - var i = l.activeItem.id.split('card-')[1]; - var next = parseInt(i) + incr; - l.setActiveItem(next); - Ext.getCmp('card-prev').setDisabled(next==0); - Ext.getCmp('card-next').setDisabled(next==2); -}; - -/* - * ================ CardLayout config (Wizard) ======================= - */ -var cardWizard = { - id:'card-wizard-panel', - title: 'Card Layout (Wizard)', - layout:'card', - activeItem: 0, - bodyStyle: 'padding:15px', - defaults: {border:false}, - bbar: ['->', { - id: 'card-prev', - text: '« Previous', - handler: cardNav.createDelegate(this, [-1]), - disabled: true - },{ - id: 'card-next', - text: 'Next »', - handler: cardNav.createDelegate(this, [1]) - }], - items: [{ - id: 'card-0', - html: 'Step 1 of 3
Please click the "Next" button to continue...
' - },{ - id: 'card-1', - html: 'Step 2 of 3
Almost there. Please click the "Next" button to continue...
' - },{ - id: 'card-2', - html: 'Step 3 of 3 - Complete
' + flex: 2, + html: 'flex : 2' }] -}; - -/* - * ================ ColumnLayout config ======================= - */ -var column = { - id:'column-panel', - title: 'Column Layout', - layout:'column', - bodyStyle:'padding:5px', - defaults: {bodyStyle:'padding:15px'}, - items: [{ - title: 'Width = .25', - columnWidth: .25, - html: 'This is some short content.
' - },{ - title: 'Width = .75', - columnWidth: .75, - html: 'This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
' - },{ - title: 'Width = 250px', - width: 250, - html: 'Not much here!' - }] -}; - -/* - * ================ FitLayout config ======================= - */ -var fit = { - id:'fit-panel', - title: 'Fit Layout', - layout:'fit', - items: { - title: 'Inner Panel', - html: 'This panel is fit within its container.
', - bodyStyle: 'margin:15px', - border: false - } -}; - -/* - * ================ FormLayout config ======================= - */ -// NOTE: While you can create a basic Panel with layout:'form', practically -// you should usually use a FormPanel to also get its form-specific functionality. -// Note that the layout config is not required on FormPanels. -var form = { - xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it - id: 'form-panel', - labelWidth: 75, - title: 'Form Layout', - bodyStyle:'padding:15px', - width: 350, - labelPad: 20, - layoutConfig: { - labelSeparator: '' - }, +}; + +/* + * ================ HBoxLayout config ======================= + */ +var hbox = { + id: 'hbox-panel', + title: 'hBox Layout', + layout: { + type: 'hbox', + pack: 'start', + align: 'stretch' + }, defaults: { - width: 230, - msgTarget: 'side' - }, - defaultType: 'textfield', - items: [{ - fieldLabel: 'First Name', - name: 'first', - allowBlank:false - },{ - fieldLabel: 'Last Name', - name: 'last' - },{ - fieldLabel: 'Company', - name: 'company' - },{ - fieldLabel: 'Email', - name: 'email', - vtype:'email' - } - ], - buttons: [{text: 'Save'},{text: 'Cancel'}] -}; - -/* - * ================ TableLayout config ======================= - */ -var table = { - id:'table-panel', - title: 'Table Layout', - layout:'table', - layoutConfig: { - columns: 4 - }, - defaults: { - bodyStyle:'padding:15px 20px' - }, + frame: true + }, items: [{ - title: 'Lots of Spanning', - html: 'Row spanning.
Row spanning.
Row spanning.
Row spanning.
Row spanning.
Row spanning.
', - rowspan: 3 - },{ - title: 'Basic Table Cell', - html: 'Basic panel in a table cell.
', - cellId: 'basic-cell', - cellCls: 'custom-cls' - },{ - html: 'Plain panel
' - },{ - title: 'Another Cell', - html: 'Row spanning.
Row spanning.
Row spanning.
Row spanning.
', - width: 300, - rowspan: 2 - },{ - html: 'Plain cell spanning two columns', - colspan: 2 - },{ - title: 'More Column Spanning', - html: 'Spanning three columns.
', - colspan: 3 - },{ - title: 'Spanning All Columns', - html: 'Spanning all columns.
', - colspan: 4 - }] -}; + title: 'Panel 1', + flex: 1, + html: 'flex : 1' + }, { + title: 'Panel 2', + width: 100, + html: 'width : 100' + }, { + title: 'Panel 3', + flex: 2, + html: 'flex : 2' + }] +};