//
-// 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: 'Main Page
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: 'Welcome to the Demo Wizard!
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: 'Congratulations!
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',
- flex: 1,
- html: 'flex : 1'
- }, {
- title: 'Panel 2',
- height: 100,
- html: 'height: 100'
- }, {
- title: 'Panel 3',
- flex: 2,
- html: 'flex : 2'
- }]
-};
-
-/*
- * ================ HBoxLayout config =======================
- */
-var hbox = {
- id: 'hbox-panel',
- title: 'hBox Layout',
- layout: {
- type: 'hbox',
- pack: 'start',
- align: 'stretch'
- },
- defaults: {
- frame: true
- },
- items: [{
- title: 'Panel 1',
- flex: 1,
- html: 'flex : 1'
- }, {
- title: 'Panel 2',
- width: 100,
- html: 'width : 100'
- }, {
- title: 'Panel 3',
- flex: 2,
- html: 'flex : 2'
- }]
-};
-
-
-
\ No newline at end of file