Hierarchy
Ext.layout.LayoutExt.layout.container.AbstractContainerExt.layout.container.ContainerExt.layout.container.Border
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:
+ + + Ext.create('Ext.panel.Panel', {
+ width: 500,
+ height: 400,
+ title: 'Border Layout',
+ layout: 'border',
+ items: [{
+ title: 'South Region is resizable',
+ region: 'south', // position for region
+ xtype: 'panel',
+ height: 100,
+ split: true, // enable resizing
+ margins: '0 5 5 5'
+ },{
+ // xtype: 'panel' implied by default
+ title: 'West Region is collapsible',
+ region:'west',
+ xtype: 'panel',
+ margins: '5 0 0 5',
+ width: 200,
+ collapsible: true, // make collapsible
+ id: 'west-region-container',
+ layout: 'fit'
+ },{
+ title: 'Center Region',
+ region: 'center', // center region is required, no width/height specified
+ xtype: 'panel',
+ layout: 'fit',
+ margins: '5 5 0 0'
+ }],
+ renderTo: Ext.getBody()
+ });
+Notes:
+ + +-
+
- Any Container using the Border layout must have a child item with
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.
+ - Any child items with a region of
westoreastmay be configured with either +an initialwidth, 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 of1.
+ - Any child items with a region of
northorsouthmay be configured with either +an initialheight, 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 of1.
+ - The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.To add/remove
+Components within a BorderLayout, have them wrapped by an additional Container which is directly
+managed by the BorderLayout. If the region is to be collapsible, the Container used directly
+by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel)
+is added to the west region:
+
+wrc = Ext.getCmp('west-region-container'); +wrc.removeAll(); +wrc.add({ + title: 'Added Panel', + html: 'Some content' +}); +
+ - There is no BorderLayout.Region class in ExtJS 4.0+ +
Config Options
CSS Class configs
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.
+ + + +Other Configs
Flag to notify the ownerCt Component on afterLayout of a change
+Flag to notify the ownerCt Component on afterLayout of a change
+Flag to notify the ownerCt Container on afterLayout of a change
+Flag to notify the ownerCt Container on afterLayout of a change
+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.
+ + + +Methods
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).
+ +Returns
- Array
of child components
+
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.
+ +Parameters
- panel : Panel
The child Panel of the layout for which to return the placeholder.
+
Returns
- Component
The Panel's placeholder unless the collapseMode is +
+'header', in which case undefined is returned.
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.
+Returns
- Ext.core.Element +