This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic split 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.
BorderLayout does not have any direct config options (other than inherited ones). All configuration options available for customizing the BorderLayout are at the Ext.layout.BorderLayout.Region and Ext.layout.BorderLayout.SplitRegion levels.
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
minSize: 75, // defaults to 50
maxSize: 150,
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
cmargins: '5 5 0 5', // adjust top margin when collapsed
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:
wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add({
title: 'Added Panel',
html: 'Some content'
});
wr = myBorderPanel.layout.west;