X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.layout.BorderLayout.html diff --git a/docs/output/Ext.layout.BorderLayout.html b/docs/output/Ext.layout.BorderLayout.html index f0a42c4d..a3c9417a 100644 --- a/docs/output/Ext.layout.BorderLayout.html +++ b/docs/output/Ext.layout.BorderLayout.html @@ -1,94 +1,95 @@ -
-
- Properties - Methods - Events - Config Options - Direct Link -
-
-
ContainerLayout
-  BorderLayout
-

Class Ext.layout.BorderLayout

- - - - - -
Package:Ext.layout
Defined In:BorderLayout.js
Class:BorderLayout
Extends:ContainerLayout
-
- * -

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.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 configs available -for customizing the BorderLayout are at the Ext.layout.BorderLayout.Region and -Ext.layout.BorderLayout.SplitRegion levels.

-

The regions of a BorderLayout are fixed at render time and thereafter, no regions may be removed or -added. The BorderLayout must have a center region, which will always fill the remaining space not used by -the other regions in the layout.

+
Properties Methods Events Config Options Direct Link 
ContainerLayout
  BorderLayout

Class Ext.layout.BorderLayout

Package:Ext.layout
Defined In:BorderLayout.js
Class:BorderLayout
Extends:ContainerLayout

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.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 border = new Ext.Panel({
-    title: 'Border Layout',
-    layout:'border',
-    items: [{
-        title: 'South Panel',
-        region: 'south',
-        height: 100,
-        minSize: 75,
-        maxSize: 250,
-        margins: '0 5 5 5'
+
var myBorderPanel = new Ext.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'
     },{
-        title: 'West Panel',
-        region:'west',
-        margins: '5 0 0 5',
-        cmargins: '5 5 0 5',
-        width: 200,
-        minSize: 100,
-        maxSize: 300
+        // 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: 'Main Content',
-        region:'center',
-        margins: '5 5 0 0'
+        title: 'Center Region',
+        region: 'center',     // center region is required, no width/height specified
+        xtype: 'container',
+        layout: 'fit',
+        margins: '5 5 0 0'
     }]
-});
- -
- -

Config Options

- - - - - - - - - - - - - - - -
Config OptionsDefined By
  - - renderHidden : Boolean
- True to hide each contained item on render (defaults to false).
- 		ContainerLayout
- -

Public Properties

-
This class has no public properties.
-

Public Methods

-
This class has no public methods.
-

Public Events

-
This class has no public events.
-
\ No newline at end of file +}); +

Notes:

    +
  • Any container using the BorderLayout 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 must have width defined +(an integer representing the number of pixels that the region should take up).
    • +
  • Any child items with a region of north or south must have height defined.
    • +
  • 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) +is added to the west region: +
    wrc = Ext.getCmp('west-region-container');
+wrc.removeAll();
+wrc.add({
+    title: 'Added Panel',
+    html: 'Some content'
+});
+wrc.doLayout();
    +
    • +
  • To reference a Region: +
    wr = myBorderPanel.layout.west;
    +
    • +

Config Options

Config OptionsDefined By
 renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout

Public Properties

PropertyDefined By

Public Methods

MethodDefined By

Public Events

This class has no public events.
\ No newline at end of file