This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions.
This class is intended to be extended or created via the layout:'border'
Ext.container.Container-layout config, and should generally not need to be created directly
via the new keyword.
Example usage:
var myBorderPanel = new Ext.panel.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});Notes:
region:'center'.
The child item in the center region will always be resized to fill the remaining space not used by
the other regions in the layout.west or east may be configured with either
an initial width, or a Ext.layout.container.Box-flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.north or south may be configured with either
an initial height, or a Ext.layout.container.Box-flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add({
title: 'Added Panel',
html: 'Some content'
});An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See Ext.Component.ctCls also.
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's base class), or the layout phase (onLayout).
Return the placeHolder Component to which the passed child Panel of the layout will collapse. By default, this will be a Header component (Docked to the appropriate border). See placeHolder. config to customize this.
Note that this will be a fully instantiated Component, but will only be rendered when the Panel is first collapsed.
Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent-targetEl.
May be overridden in layout managers which implement an inner element.