docs/api/Ext.layout.container.Border.html

   1 <!DOCTYPE html><html><head><title>Ext.layout.container.Border | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.layout.container.Border',
  13         docClass: 'Ext.layout.container.Border',
  14         docReq: 'Ext.layout.container.Border',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Border.html#Ext-layout.container.Border';
  33     clsInfo = {"methods":["getLayoutItems","getPlaceholder","getRenderTarget","getTarget"],"cfgs":["bindToOwnerCtComponent","bindToOwnerCtContainer","itemCls"],"properties":[],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Border.html#Ext-layout.container.Border" target="_blank">Ext.layout.container.Border</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.layout.Layout.html" rel="Ext.layout.Layout" class="cls docClass">Ext.layout.Layout</a><div class="subclass"><a href="Ext.layout.container.AbstractContainer.html" rel="Ext.layout.container.AbstractContainer" class="cls docClass">Ext.layout.container.AbstractContainer</a><div class="subclass"><a href="Ext.layout.container.Container.html" rel="Ext.layout.container.Container" class="cls docClass">Ext.layout.container.Container</a><div class="subclass"><strong>Ext.layout.container.Border</strong></div></div></div></div></pre><p>This is a multi-pane, application-oriented UI layout style that supports multiple
  38 nested panels, automatic bars between regions and built-in
  39 <a href="Ext.panel.Panel.html#collapsible" rel="Ext.panel.Panel#collapsible" class="docClass">expanding and collapsing</a> of regions.</p>
  40
  41
  42 <p>This class is intended to be extended or created via the <code>layout:'border'</code>
  43 <a href="Ext.container.Container.html#layout" rel="Ext.container.Container#layout" class="docClass">Ext.container.Container.layout</a> config, and should generally not need to be created directly
  44 via the new keyword.</p>
  45
  46
  47 <p><img class="screenshot" src="../Ext.layout.container.Border.png" alt="Ext.layout.container.Border container layout" /></p>
  48
  49 <p>Example usage:</p>
  50
  51
  52 <pre class="prettyprint"><code>     Ext.create('Ext.panel.Panel', {
  53         width: 500,
  54         height: 400,
  55         title: 'Border Layout',
  56         layout: 'border',
  57         items: [{
  58             title: 'South Region is resizable',
  59             region: 'south',     // position for region
  60             xtype: 'panel',
  61             height: 100,
  62             split: true,         // enable resizing
  63             margins: '0 5 5 5'
  64         },{
  65             // xtype: 'panel' implied by default
  66             title: 'West Region is collapsible',
  67             region:'west',
  68             xtype: 'panel',
  69             margins: '5 0 0 5',
  70             width: 200,
  71             collapsible: true,   // make collapsible
  72             id: 'west-region-container',
  73             layout: 'fit'
  74         },{
  75             title: 'Center Region',
  76             region: 'center',     // center region is required, no width/height specified
  77             xtype: 'panel',
  78             layout: 'fit',
  79             margins: '5 5 0 0'
  80         }],
  81         renderTo: Ext.getBody()
  82     });
  83 </code></pre>
  84
  85
  86 <p><b><u>Notes</u></b>:</p>
  87
  88
  89 <div class="mdetail-params"><ul>
  90 <li>Any Container using the Border layout <b>must</b> have a child item with <code>region:'center'</code>.
  91 The child item in the center region will always be resized to fill the remaining space not used by
  92 the other regions in the layout.</li>
  93 <li>Any child items with a region of <code>west</code> or <code>east</code> may be configured with either
  94 an initial <code>width</code>, or a <a href="Ext.layout.container.Box.html#flex" rel="Ext.layout.container.Box#flex" class="docClass">Ext.layout.container.Box.flex</a> value, or an initial percentage width <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
  95 <li>Any child items with a region of <code>north</code> or <code>south</code> may be configured with either
  96 an initial <code>height</code>, or a <a href="Ext.layout.container.Box.html#flex" rel="Ext.layout.container.Box#flex" class="docClass">Ext.layout.container.Box.flex</a> value, or an initial percentage height <b>string</b> (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of <code>1</code>.</li>
  97 <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>.To add/remove
  98 Components within a BorderLayout, have them wrapped by an additional Container which is directly
  99 managed by the BorderLayout.  If the region is to be collapsible, the Container used directly
 100 by the BorderLayout manager should be a Panel.  In the following example a Container (an Ext.panel.Panel)
 101 is added to the west region:
 102 <pre class="prettyprint"><code>wrc = <a href="Ext.html#getCmp" rel="Ext#getCmp" class="docClass">Ext.getCmp</a>('west-region-container');
 103 wrc.<a href="Ext.container.Container.html#removeAll" rel="Ext.container.Container#removeAll" class="docClass">removeAll</a>();
 104 wrc.<a href="Ext.container.Container.html#add" rel="Ext.container.Container#add" class="docClass">add</a>({
 105     title: 'Added Panel',
 106     html: 'Some content'
 107 });
 108 </code></pre>
 109 </li>
 110 <li><b>There is no BorderLayout.Region class in ExtJS 4.0+</b></li>
 111 </ul></div>
 112
 113 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">CSS Class configs</h4><div id="config-itemCls" class="member f inherited"><a href="Ext.layout.container.Border.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Border.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
 114 customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
 115 customized styles to the container or any of its children using standard CSS rules. See
 116 <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>
 117
 118
 119 <p></p></p>
 120 </div></div></div><h4 class="cfgGroup">Other Configs</h4><div id="config-bindToOwnerCtComponent" class="member f inherited"><a href="Ext.layout.container.Border.html#config-bindToOwnerCtComponent" rel="config-bindToOwnerCtComponent" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtComponent" class="viewSource">view source</a></div><a name="bindToOwnerCtComponent"></a><a name="config-bindToOwnerCtComponent"></a><a href="Ext.layout.container.Border.html#" rel="config-bindToOwnerCtComponent" class="cls expand">bindToOwnerCtComponent</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
 121 </div><div class="long"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
 122 </div></div></div><div id="config-bindToOwnerCtContainer" class="member inherited"><a href="Ext.layout.container.Border.html#config-bindToOwnerCtContainer" rel="config-bindToOwnerCtContainer" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtContainer" class="viewSource">view source</a></div><a name="bindToOwnerCtContainer"></a><a name="config-bindToOwnerCtContainer"></a><a href="Ext.layout.container.Border.html#" rel="config-bindToOwnerCtContainer" class="cls expand">bindToOwnerCtContainer</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
 123 </div><div class="long"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
 124 </div></div></div><div id="config-itemCls" class="member inherited"><a href="Ext.layout.container.Border.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Border.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
 125 customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
 126 customized styles to the container or any of its children using standard CSS rules. See
 127 <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>
 128
 129
 130 <p></p></p>
 131 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-getLayoutItems" class="member f inherited"><a href="Ext.layout.container.Border.html#method-getLayoutItems" rel="method-getLayoutItems" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getLayoutItems" class="viewSource">view source</a></div><a name="getLayoutItems"></a><a name="method-getLayoutItems"></a><a href="Ext.layout.container.Border.html#" rel="method-getLayoutItems" class="cls expand">getLayoutItems</a> : Array</div><div class="description"><div class="short">Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
 132 ...</div><div class="long"><p>Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
 133 base class), or the layout phase (onLayout).</p>
 134
 135 <h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>of child components</p>
 136 </li></ul></div></div></div><div id="method-getPlaceholder" class="member ni"><a href="Ext.layout.container.Border.html#method-getPlaceholder" rel="method-getPlaceholder" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Border.html" class="definedIn docClass">Ext.layout.container.Border</a><br/><a href="../source/Border.html#Ext-layout.container.Border-method-getPlaceholder" class="viewSource">view source</a></div><a name="getPlaceholder"></a><a name="method-getPlaceholder"></a><a href="Ext.layout.container.Border.html#" rel="method-getPlaceholder" class="cls expand">getPlaceholder</a>(
 137 <span class="pre">Panel panel</span>)
 138  : Component</div><div class="description"><div class="short">Return the placeholder Component to which the passed child Panel of the layout will collapse.
 139 By default, this will b...</div><div class="long"><p>Return the <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a> Component to which the passed child Panel of the layout will collapse.
 140 By default, this will be a <a href="Ext.panel.Header.html" rel="Ext.panel.Header" class="docClass">Header</a> component (Docked to the appropriate border). See <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a>.
 141 config to customize this.</p>
 142
 143
 144 <p><b>Note that this will be a fully instantiated Component, but will only be <i>rendered</i> when the Panel is first collapsed.</b></p>
 145
 146 <h3 class="pa">Parameters</h3><ul><li><span class="pre">panel</span> : Panel<div class="sub-desc"><p>The child Panel of the layout for which to return the <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a>.</p>
 147 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Component</span>&nbsp; &nbsp;<p>The Panel's <a href="Ext.panel.Panel.html#placeholder" rel="Ext.panel.Panel#placeholder" class="docClass">placeholder</a> unless the <a href="Ext.panel.Panel.html#collapseMode" rel="Ext.panel.Panel#collapseMode" class="docClass">collapseMode</a> is
 148 <code>'header'</code>, in which case <i>undefined</i> is returned.</p>
 149 </li></ul></div></div></div><div id="method-getRenderTarget" class="member inherited"><a href="Ext.layout.container.Border.html#method-getRenderTarget" rel="method-getRenderTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getRenderTarget" class="viewSource">view source</a></div><a name="getRenderTarget"></a><a name="method-getRenderTarget"></a><a href="Ext.layout.container.Border.html#" rel="method-getRenderTarget" class="cls expand">getRenderTarget</a> : Ext.core.Element</div><div class="description"><div class="short">Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.tar...</div><div class="long"><p>Returns the element into which rendering must take place. Defaults to the owner Container's <a href="Ext.AbstractComponent.html#targetEl" rel="Ext.AbstractComponent#targetEl" class="docClass">Ext.AbstractComponent.targetEl</a>.</p>
 150
 151
 152 <p>May be overridden in layout managers which implement an inner element.</p>
 153 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 154 </li></ul></div></div></div><div id="method-getTarget" class="member inherited"><a href="Ext.layout.container.Border.html#method-getTarget" rel="method-getTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getTarget" class="viewSource">view source</a></div><a name="getTarget"></a><a name="method-getTarget"></a><a href="Ext.layout.container.Border.html#" rel="method-getTarget" class="cls expand">getTarget</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the owner component's resize element.</p>
 155 </div><div class="long"><p>Returns the owner component's resize element.</p>
 156 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 157 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>