git.roojs.org Git - roojs1/blob - docs/src/Roo_layout_Border.js.html

   1 <html><head><title>Roo/layout/Border.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11 /**
  12  * @class Roo.layout.Border
  13  * @extends Roo.layout.Manager
  14  * @children Roo.panel.Content
  15  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
  16  * please see: &lt;br&gt;&lt;br&gt;
  17  * &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/&quot;&gt;Cross Browser Layouts - Part 1&lt;/a&gt;&lt;br&gt;
  18  * &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/&quot;&gt;Cross Browser Layouts - Part 2&lt;/a&gt;&lt;br&gt;&lt;br&gt;
  19  * Example:
  20  &lt;pre&gt;&lt;code&gt;
  21  var layout = new Roo.layout.Border(document.body, {
  22     north: {
  23         initialSize: 25,
  24         titlebar: false
  25     },
  26     west: {
  27         split:true,
  28         initialSize: 200,
  29         minSize: 175,
  30         maxSize: 400,
  31         titlebar: true,
  32         collapsible: true
  33     },
  34     east: {
  35         split:true,
  36         initialSize: 202,
  37         minSize: 175,
  38         maxSize: 400,
  39         titlebar: true,
  40         collapsible: true
  41     },
  42     south: {
  43         split:true,
  44         initialSize: 100,
  45         minSize: 100,
  46         maxSize: 200,
  47         titlebar: true,
  48         collapsible: true
  49     },
  50     center: {
  51         titlebar: true,
  52         autoScroll:true,
  53         resizeTabs: true,
  54         minTabWidth: 50,
  55         preferredTabWidth: 150
  56     }
  57 });
  58
  59 // shorthand
  60 var CP = Roo.panel.Content;
  61
  62 layout.beginUpdate();
  63 layout.add(&quot;north&quot;, new CP(&quot;north&quot;, &quot;North&quot;));
  64 layout.add(&quot;south&quot;, new CP(&quot;south&quot;, {title: &quot;South&quot;, closable: true}));
  65 layout.add(&quot;west&quot;, new CP(&quot;west&quot;, {title: &quot;West&quot;}));
  66 layout.add(&quot;east&quot;, new CP(&quot;autoTabs&quot;, {title: &quot;Auto Tabs&quot;, closable: true}));
  67 layout.add(&quot;center&quot;, new CP(&quot;center1&quot;, {title: &quot;Close Me&quot;, closable: true}));
  68 layout.add(&quot;center&quot;, new CP(&quot;center2&quot;, {title: &quot;Center Panel&quot;, closable: false}));
  69 layout.getRegion(&quot;center&quot;).showPanel(&quot;center1&quot;);
  70 layout.endUpdate();
  71 &lt;/code&gt;&lt;/pre&gt;
  72
  73 &lt;b&gt;The container the layout is rendered into can be either the body element or any other element.
  74 If it is not the body element, the container needs to either be an absolute positioned element,
  75 or you will need to add &quot;position:relative&quot; to the css of the container.  You will also need to specify
  76 the container size if it is not the body element.&lt;/b&gt;
  77
  78 * @constructor
  79 * Create a new BorderLayout
  80 * @param {String/HTMLElement/Element} container The container this layout is bound to
  81 * @param {Object} config Configuration options
  82  */
  83 </span><span class="jsdoc-var">Roo.layout.Border </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  84     </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
  85     </span><span class="jsdoc-var">Roo.layout.Border.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  86     </span><span class="jsdoc-var">this.factory </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.factory </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.layout.Border.RegionFactory</span><span class="jsdoc-syntax">;
  87     </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.validRegions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
  88         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.validRegions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
  89         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
  90             </span><span class="jsdoc-var">this.addRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]);
  91         }
  92     }
  93 };
  94
  95 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.layout.Border</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.layout.Manager</span><span class="jsdoc-syntax">, {
  96
  97         </span><span class="jsdoc-comment">/**
  98          * @cfg {Roo.layout.Region} east
  99          */
 100         /**
 101          * @cfg {Roo.layout.Region} west
 102          */
 103         /**
 104          * @cfg {Roo.layout.Region} north
 105          */
 106         /**
 107          * @cfg {Roo.layout.Region} south
 108          */
 109         /**
 110          * @cfg {Roo.layout.Region} center
 111          */
 112     /**
 113      * Creates and adds a new region if it doesn't already exist.
 114      * @param {String} target The target region key (north, south, east, west or center).
 115      * @param {Object} config The regions config object
 116      * @return {BorderLayoutRegion} The new region
 117      */
 118     </span><span class="jsdoc-var">addRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
 119         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
 120             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.create</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 121             </span><span class="jsdoc-var">this.bindRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
 122         }
 123         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
 124     },
 125
 126     </span><span class="jsdoc-comment">// private (kinda)
 127     </span><span class="jsdoc-var">bindRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
 128         </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
 129         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 130         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 131         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelremoved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 132         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 133         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionResized</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 134         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;collapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionCollapsed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 135         </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;expanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionExpanded</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 136     },
 137
 138     </span><span class="jsdoc-comment">/**
 139      * Performs a layout update.
 140      */
 141     </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 142         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">) {
 143             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 144         }
 145         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getViewSize</span><span class="jsdoc-syntax">();
 146         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">;
 147         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">;
 148         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 149         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 150         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= 0;
 151         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">= 0;
 152         </span><span class="jsdoc-comment">//var x = 0, y = 0;
 153
 154         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
 155         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">];
 156         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">];
 157         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">];
 158         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">];
 159         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">];
 160         </span><span class="jsdoc-comment">//if(this.hideOnLayout){ // not supported anymore
 161             //c.el.setStyle(&quot;display&quot;, &quot;none&quot;);
 162         //}
 163         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">north.isVisible</span><span class="jsdoc-syntax">()){
 164             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getBox</span><span class="jsdoc-syntax">();
 165             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getMargins</span><span class="jsdoc-syntax">();
 166             </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
 167             </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
 168             </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
 169             </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">;
 170             </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">centerY</span><span class="jsdoc-syntax">;
 171             </span><span class="jsdoc-var">north.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
 172         }
 173         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">south.isVisible</span><span class="jsdoc-syntax">()){
 174             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getBox</span><span class="jsdoc-syntax">();
 175             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getMargins</span><span class="jsdoc-syntax">();
 176             </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
 177             </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
 178             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
 179             </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
 180             </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalHeight</span><span class="jsdoc-syntax">;
 181             </span><span class="jsdoc-var">south.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
 182         }
 183         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">west.isVisible</span><span class="jsdoc-syntax">()){
 184             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getBox</span><span class="jsdoc-syntax">();
 185             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getMargins</span><span class="jsdoc-syntax">();
 186             </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
 187             </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
 188             </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
 189             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
 190             </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
 191             </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
 192             </span><span class="jsdoc-var">west.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
 193         }
 194         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">east.isVisible</span><span class="jsdoc-syntax">()){
 195             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getBox</span><span class="jsdoc-syntax">();
 196             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getMargins</span><span class="jsdoc-syntax">();
 197             </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
 198             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
 199             </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
 200             </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
 201             </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
 202             </span><span class="jsdoc-var">east.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
 203         }
 204         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">){
 205             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">center.getMargins</span><span class="jsdoc-syntax">();
 206             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerBox </span><span class="jsdoc-syntax">= {
 207                 </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">,
 208                 </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">,
 209                 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">),
 210                 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">)
 211             };
 212             </span><span class="jsdoc-comment">//if(this.hideOnLayout){
 213                 //center.el.setStyle(&quot;display&quot;, &quot;block&quot;);
 214             //}
 215             </span><span class="jsdoc-var">center.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">centerBox</span><span class="jsdoc-syntax">));
 216         }
 217         </span><span class="jsdoc-var">this.el.repaint</span><span class="jsdoc-syntax">();
 218         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;layout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 219     },
 220
 221     </span><span class="jsdoc-comment">// private
 222     </span><span class="jsdoc-var">safeBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
 223         </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
 224         </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
 225         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
 226     },
 227
 228     </span><span class="jsdoc-comment">/**
 229      * Adds a ContentPanel (or subclass) to this layout.
 230      * @param {String} target The target region key (north, south, east, west or center).
 231      * @param {Roo.panel.Content} panel The panel to add
 232      * @return {Roo.panel.Content} The added panel
 233      */
 234     </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 235
 236         </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
 237         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 238     },
 239
 240     </span><span class="jsdoc-comment">/**
 241      * Remove a ContentPanel (or subclass) to this layout.
 242      * @param {String} target The target region key (north, south, east, west or center).
 243      * @param {Number/String/Roo.panel.Content} panel The index, id or panel to remove
 244      * @return {Roo.panel.Content} The removed panel
 245      */
 246     </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 247         </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
 248         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 249     },
 250
 251     </span><span class="jsdoc-comment">/**
 252      * Searches all regions for a panel with the specified id
 253      * @param {String} panelId
 254      * @return {Roo.panel.Content} The panel or null if it wasn't found
 255      */
 256     </span><span class="jsdoc-var">findPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">){
 257         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
 258         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
 259             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
 260                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
 261                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
 262                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
 263                 }
 264             }
 265         }
 266         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 267     },
 268
 269     </span><span class="jsdoc-comment">/**
 270      * Searches all regions for a panel with the specified id and activates (shows) it.
 271      * @param {String/panel.Content} panelId The panels id or the panel itself
 272      * @return {Roo.panel.Content} The shown panel or null
 273      */
 274     </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">) {
 275       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
 276       </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
 277          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
 278          </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
 279             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">)){
 280                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
 281             }
 282          }
 283       }
 284       </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 285    },
 286
 287    </span><span class="jsdoc-comment">/**
 288      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
 289      * @param {Roo.state.Provider} provider (optional) An alternate state provider
 290      */
 291     </span><span class="jsdoc-var">restoreState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
 292         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
 293             </span><span class="jsdoc-var">provider </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.state.Manager</span><span class="jsdoc-syntax">;
 294         }
 295         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.layout.StateManager</span><span class="jsdoc-syntax">();
 296         </span><span class="jsdoc-var">sm.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">);
 297     },
 298
 299     </span><span class="jsdoc-comment">/**
 300      * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
 301      * object should contain properties for each region to add ContentPanels to, and each property's value should be
 302      * a valid ContentPanel config object.  Example:
 303      * &lt;pre&gt;&lt;code&gt;
 304 // Create the main layout
 305 var layout = new Roo.layout.Border('main-ct', {
 306     west: {
 307         split:true,
 308         minSize: 175,
 309         titlebar: true
 310     },
 311     center: {
 312         title:'Components'
 313     }
 314 }, 'main-ct');
 315
 316 // Create and add multiple ContentPanels at once via configs
 317 layout.batchAdd({
 318    west: {
 319        id: 'source-files',
 320        autoCreate:true,
 321        title:'Ext Source Files',
 322        autoScroll:true,
 323        fitToFrame:true
 324    },
 325    center : {
 326        el: cview,
 327        autoScroll:true,
 328        fitToFrame:true,
 329        toolbar: tb,
 330        resizeEl:'cbody'
 331    }
 332 });
 333 &lt;/code&gt;&lt;/pre&gt;
 334      * @param {Object} regions An object containing ContentPanel configs by region name
 335      */
 336     </span><span class="jsdoc-var">batchAdd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
 337         </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
 338         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rname </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
 339             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">];
 340             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">){
 341                 </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">]);
 342             }
 343         }
 344         </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
 345     },
 346
 347     </span><span class="jsdoc-comment">// private
 348     </span><span class="jsdoc-var">addTypedPanels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">){
 349         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
 350             </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel.Content</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
 351         }
 352         </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
 353             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 354                 </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 355             }
 356         }
 357         </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ps.events</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// raw config?
 358             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">;
 359             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent conflict
 360             </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel.Content</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
 361         }
 362         </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{  </span><span class="jsdoc-comment">// panel object assumed!
 363             </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
 364         }
 365     },
 366     </span><span class="jsdoc-comment">/**
 367      * Adds a xtype elements to the layout.
 368      * &lt;pre&gt;&lt;code&gt;
 369
 370 layout.addxtype({
 371        xtype : 'ContentPanel',
 372        region: 'west',
 373        items: [ .... ]
 374    }
 375 );
 376
 377 layout.addxtype({
 378         xtype : 'NestedLayoutPanel',
 379         region: 'west',
 380         layout: {
 381            center: { },
 382            west: { }
 383         },
 384         items : [ ... list of content panels or nested layout panels.. ]
 385    }
 386 );
 387 &lt;/code&gt;&lt;/pre&gt;
 388      * @param {Object} cfg Xtype definition of item to add.
 389      */
 390     </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
 391     {
 392         </span><span class="jsdoc-comment">// basically accepts a pannel...
 393         // can accept a layout region..!?!?
 394         //Roo.log('Roo.layout.Border add ' + cfg.xtype)
 395
 396         // if (!cfg.xtype.match(/Panel$/)) {
 397         //     return false;
 398         // }
 399         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 400
 401         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 402             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Failed to add Panel, region was not set&quot;</span><span class="jsdoc-syntax">);
 403             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
 404             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 405         }
 406         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
 407         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
 408
 409
 410         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= [];
 411         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">) {
 412             </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
 413             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
 414         }
 415         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 416
 417         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">)
 418         {
 419             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'Content'</span><span class="jsdoc-syntax">:
 420                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.autoCreate</span><span class="jsdoc-syntax">) {
 421                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 422                 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 423                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 424                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 425                 </span><span class="jsdoc-syntax">}
 426
 427                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 428                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 429             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'Grid'</span><span class="jsdoc-syntax">:
 430                 </span><span class="jsdoc-comment">// needs grid and region
 431
 432                 //var el = this.getRegion(region).el.createChild();
 433                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 434                 </span><span class="jsdoc-comment">// create the grid first...
 435
 436                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.grid.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">);
 437                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">;
 438                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">) {
 439                     </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 440                 }
 441                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 442
 443                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 444                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.background</span><span class="jsdoc-syntax">) {
 445                     </span><span class="jsdoc-var">ret.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">gp</span><span class="jsdoc-syntax">) {
 446                         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">gp.grid.rendered</span><span class="jsdoc-syntax">) {
 447                             </span><span class="jsdoc-var">gp.grid.render</span><span class="jsdoc-syntax">();
 448                         }
 449                     });
 450                 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 451                     </span><span class="jsdoc-var">grid.render</span><span class="jsdoc-syntax">();
 452                 }
 453                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 454             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'NestedLayout'</span><span class="jsdoc-syntax">:
 455                 </span><span class="jsdoc-comment">// create a new Layout (which is  a Border Layout...
 456                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 457                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">clayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
 458                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
 459                 </span><span class="jsdoc-var">clayout.items   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items  </span><span class="jsdoc-syntax">|| [];
 460                 </span><span class="jsdoc-comment">// replace this exitems with the clayout ones..
 461                 </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items</span><span class="jsdoc-syntax">;
 462
 463
 464                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.panels.length </span><span class="jsdoc-syntax">&lt; 1) {
 465                     </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 466                 }
 467                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.layout.Border</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">clayout</span><span class="jsdoc-syntax">);
 468
 469                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 470                 //console.log('adding nested layout panel '  + cfg.toSource());
 471                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 472                 </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">= {}; </span><span class="jsdoc-comment">/// find first...
 473                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 474
 475             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'Calendar'</span><span class="jsdoc-syntax">:
 476                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 477                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 478                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 479             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'Tree'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// our new panel!
 480                 </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 481                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.panel</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 482                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 483                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 484             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ContentPanel'</span><span class="jsdoc-syntax">:
 485             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ScrollPanel'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-comment">// ContentPanel (el, cfg)
 486             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ViewPanel'</span><span class="jsdoc-syntax">:
 487                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.autoCreate</span><span class="jsdoc-syntax">) {
 488                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 489                 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 490                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 491                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 492                 </span><span class="jsdoc-syntax">}
 493
 494                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 495                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 496
 497
 498             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'TreePanel'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// our new panel!
 499                 </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 500                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 501                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 502                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 503
 504             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'NestedLayoutPanel'</span><span class="jsdoc-syntax">:
 505                 </span><span class="jsdoc-comment">// create a new Layout (which is  a Border Layout...
 506                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 507                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">clayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
 508                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
 509                 </span><span class="jsdoc-var">clayout.items   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items  </span><span class="jsdoc-syntax">|| [];
 510                 </span><span class="jsdoc-comment">// replace this exitems with the clayout ones..
 511                 </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items</span><span class="jsdoc-syntax">;
 512
 513
 514                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.panels.length </span><span class="jsdoc-syntax">&lt; 1) {
 515                     </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 516                 }
 517                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.layout.Border</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">clayout</span><span class="jsdoc-syntax">);
 518
 519                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 520                 //console.log('adding nested layout panel '  + cfg.toSource());
 521                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 522                 </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">= {}; </span><span class="jsdoc-comment">/// find first...
 523                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 524
 525             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'GridPanel'</span><span class="jsdoc-syntax">:
 526
 527                 </span><span class="jsdoc-comment">// needs grid and region
 528
 529                 //var el = this.getRegion(region).el.createChild();
 530                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
 531                 </span><span class="jsdoc-comment">// create the grid first...
 532
 533                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.grid.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">);
 534                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">;
 535                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">) {
 536                     </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 537                 }
 538                 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 539
 540                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 541                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.background</span><span class="jsdoc-syntax">) {
 542                     </span><span class="jsdoc-var">ret.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">gp</span><span class="jsdoc-syntax">) {
 543                         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">gp.grid.rendered</span><span class="jsdoc-syntax">) {
 544                             </span><span class="jsdoc-var">gp.grid.render</span><span class="jsdoc-syntax">();
 545                         }
 546                     });
 547                 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 548                     </span><span class="jsdoc-var">grid.render</span><span class="jsdoc-syntax">();
 549                 }
 550                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 551
 552
 553
 554
 555
 556
 557             </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
 558                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 559
 560                     </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
 561                     </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
 562                 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 563
 564                     </span><span class="jsdoc-var">alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Can not add '&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cfg.xtype </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;' to BorderLayout&quot;</span><span class="jsdoc-syntax">);
 565                     </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 566                 }
 567
 568              </span><span class="jsdoc-comment">// GridPanel (grid, cfg)
 569
 570         </span><span class="jsdoc-syntax">}
 571         </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
 572         </span><span class="jsdoc-comment">// add children..
 573         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 574         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">abn </span><span class="jsdoc-syntax">= {};
 575         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)  {
 576             </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">i.region </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">i.region </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 577
 578             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ret.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
 579
 580             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">) {
 581                 </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? 0 : </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">]+1;
 582                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">i.background</span><span class="jsdoc-syntax">) {
 583                     </span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] ;
 584                 }
 585             }
 586
 587         });
 588         </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
 589
 590         </span><span class="jsdoc-comment">// make the last non-background panel active..
 591         //if (nb) { Roo.log(abn); }
 592         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">) {
 593
 594             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">) {
 595                 </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
 596                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">) {
 597                     </span><span class="jsdoc-comment">// tried using nb[r], but it does not work..
 598
 599                     </span><span class="jsdoc-var">region.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">]);
 600
 601                 }
 602             }
 603         }
 604         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 605
 606     }
 607 });
 608
 609 </span><span class="jsdoc-comment">/**
 610  * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
 611  * the beginUpdate and endUpdate calls internally.  The key to this method is the &lt;b&gt;panels&lt;/b&gt; property that can be
 612  * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
 613  * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
 614  * &lt;pre&gt;&lt;code&gt;
 615 // shorthand
 616 var CP = Roo.ContentPanel;
 617
 618 var layout = Roo.layout.Border.create({
 619     north: {
 620         initialSize: 25,
 621         titlebar: false,
 622         panels: [new CP(&quot;north&quot;, &quot;North&quot;)]
 623     },
 624     west: {
 625         split:true,
 626         initialSize: 200,
 627         minSize: 175,
 628         maxSize: 400,
 629         titlebar: true,
 630         collapsible: true,
 631         panels: [new CP(&quot;west&quot;, {title: &quot;West&quot;})]
 632     },
 633     east: {
 634         split:true,
 635         initialSize: 202,
 636         minSize: 175,
 637         maxSize: 400,
 638         titlebar: true,
 639         collapsible: true,
 640         panels: [new CP(&quot;autoTabs&quot;, {title: &quot;Auto Tabs&quot;, closable: true})]
 641     },
 642     south: {
 643         split:true,
 644         initialSize: 100,
 645         minSize: 100,
 646         maxSize: 200,
 647         titlebar: true,
 648         collapsible: true,
 649         panels: [new CP(&quot;south&quot;, {title: &quot;South&quot;, closable: true})]
 650     },
 651     center: {
 652         titlebar: true,
 653         autoScroll:true,
 654         resizeTabs: true,
 655         minTabWidth: 50,
 656         preferredTabWidth: 150,
 657         panels: [
 658             new CP(&quot;center1&quot;, {title: &quot;Close Me&quot;, closable: true}),
 659             new CP(&quot;center2&quot;, {title: &quot;Center Panel&quot;, closable: false})
 660         ]
 661     }
 662 }, document.body);
 663
 664 layout.getRegion(&quot;center&quot;).showPanel(&quot;center1&quot;);
 665 &lt;/code&gt;&lt;/pre&gt;
 666  * @param config
 667  * @param targetEl
 668  */
 669 </span><span class="jsdoc-var">Roo.layout.Border.create </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">targetEl</span><span class="jsdoc-syntax">){
 670     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.layout.Border</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targetEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 671     </span><span class="jsdoc-var">layout.beginUpdate</span><span class="jsdoc-syntax">();
 672     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">regions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.layout.Border.RegionFactory.validRegions</span><span class="jsdoc-syntax">;
 673     </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">jlen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">jlen</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
 674         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
 675         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">] &amp;&amp; </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">){
 676             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">];
 677             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">;
 678             </span><span class="jsdoc-var">layout.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
 679         }
 680     }
 681     </span><span class="jsdoc-var">layout.endUpdate</span><span class="jsdoc-syntax">();
 682     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
 683 };
 684
 685 </span><span class="jsdoc-comment">// private
 686 </span><span class="jsdoc-var">Roo.layout.Border.RegionFactory </span><span class="jsdoc-syntax">= {
 687     </span><span class="jsdoc-comment">// private
 688     </span><span class="jsdoc-var">validRegions </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">],
 689
 690     </span><span class="jsdoc-comment">// private
 691     </span><span class="jsdoc-var">create </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
 692         </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
 693         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.lightweight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.basic</span><span class="jsdoc-syntax">){
 694             </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.layout.BasicRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">);
 695         }
 696                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.charAt</span><span class="jsdoc-syntax">(0)</span><span class="jsdoc-var">.toUpperCase</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">target.slice</span><span class="jsdoc-syntax">(1);
 697                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.layout</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 698                         </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Layout region &quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&quot; not supported.'</span><span class="jsdoc-syntax">;
 699                 }
 700                 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.layout</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 701
 702
 703     }
 704 };</span></code></body></html>