//
// 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'
}]
};