X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/api/Ext.layout.container.Border.html?ds=sidebyside diff --git a/docs/api/Ext.layout.container.Border.html b/docs/api/Ext.layout.container.Border.html new file mode 100644 index 00000000..aeb24f56 --- /dev/null +++ b/docs/api/Ext.layout.container.Border.html @@ -0,0 +1,157 @@ +Ext.layout.container.Border | Ext JS 4.0 Documentation +
For up to date documentation and features, visit +http://docs.sencha.com/ext-js/4-0

Sencha Documentation

+ + + + + +

Hierarchy

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.

+ + +

Ext.layout.container.Border container layout

+ +

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 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.
  • +
  • Any child items with a region of 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.
  • +
  • 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+
  • +
+ +
Defined By

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 t...

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 t...

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.

+ + +

+
Defined By

Methods

 
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's +...

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 b...

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

 
Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.tar...

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    +
 

Returns the owner component's resize element.

+

Returns the owner component's resize element.

+

Returns

  • Ext.core.Element    +
\ No newline at end of file