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

   1 <html><head><title>../roojs1/Roo/LayoutRegion.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 /**
  13  * @class Roo.LayoutRegion
  14  * @extends Roo.BasicLayoutRegion
  15  * This class represents a region in a layout manager.
  16  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
  17  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
  18  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
  19  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
  20  * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
  21  * @cfg {String}    tabPosition     (top|bottom) &quot;top&quot; or &quot;bottom&quot; (defaults to &quot;bottom&quot;)
  22  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
  23  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
  24  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
  25  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
  26  * @cfg {String}    title           The title for the region (overrides panel titles)
  27  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
  28  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the &quot;floated&quot; region (defaults to true)
  29  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
  30  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
  31  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
  32  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
  33  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
  34  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
  35  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
  36  * @cfg {Boolean}   showPin         True to show a pin button
  37  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
  38  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
  39  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
  40  * @cfg {Number}    width           For East/West panels
  41  * @cfg {Number}    height          For North/South panels
  42  * @cfg {Boolean}   split           To show the splitter
  43  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
  44  */
  45 </span><span class="jsdoc-var">Roo.LayoutRegion </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</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">pos</span><span class="jsdoc-syntax">){
  46     </span><span class="jsdoc-var">Roo.LayoutRegion.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  47     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
  48     </span><span class="jsdoc-comment">/** This region's container element
  49     * @type Roo.Element */
  50     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr.el.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-panel x-layout-panel-&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  51     </span><span class="jsdoc-comment">/** This region's title element
  52     * @type Roo.Element */
  53
  54     </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd x-layout-title-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[
  55         {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;span&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-text&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">},
  56         {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-tools&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">}
  57     ]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  58     </span><span class="jsdoc-var">this.titleEl.enableDisplayMode</span><span class="jsdoc-syntax">();
  59     </span><span class="jsdoc-comment">/** This region's title text element
  60     * @type HTMLElement */
  61     </span><span class="jsdoc-var">this.titleTextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.titleEl.dom.firstChild</span><span class="jsdoc-syntax">;
  62     </span><span class="jsdoc-var">this.tools </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.titleEl.dom.childNodes</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  63     </span><span class="jsdoc-var">this.closeBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-close&quot;</span><span class="jsdoc-syntax">);
  64     </span><span class="jsdoc-var">this.closeBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
  65     </span><span class="jsdoc-var">this.closeBtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.closeClicked</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  66     </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
  67
  68     </span><span class="jsdoc-var">this.createBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  69     </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
  70     </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
  71
  72     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.hideWhenEmpty</span><span class="jsdoc-syntax">){
  73         </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
  74         </span><span class="jsdoc-var">this.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.validateVisibility</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  75         </span><span class="jsdoc-var">this.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.validateVisibility</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  76     }
  77     </span><span class="jsdoc-var">this.applyConfig</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  78 };
  79
  80 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutRegion</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BasicLayoutRegion</span><span class="jsdoc-syntax">, {
  81
  82     </span><span class="jsdoc-var">createBody </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  83         </span><span class="jsdoc-comment">/** This region's body element
  84         * @type Roo.Element */
  85         </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-panel-body&quot;</span><span class="jsdoc-syntax">});
  86     },
  87
  88     </span><span class="jsdoc-var">applyConfig </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">){
  89         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsible </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;center&quot; </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.collapsedEl</span><span class="jsdoc-syntax">){
  90             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper</span><span class="jsdoc-syntax">;
  91             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
  92                 </span><span class="jsdoc-var">this.collapseBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-collapse-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">);
  93                 </span><span class="jsdoc-var">this.collapseBtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  94                 </span><span class="jsdoc-var">this.collapseBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
  95
  96                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.showPin </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.showPin</span><span class="jsdoc-syntax">){
  97                     </span><span class="jsdoc-var">this.stickBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tools.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-stick&quot;</span><span class="jsdoc-syntax">);
  98                     </span><span class="jsdoc-var">this.stickBtn.enableDisplayMode</span><span class="jsdoc-syntax">();
  99                     </span><span class="jsdoc-var">this.stickBtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 100                     </span><span class="jsdoc-var">this.stickBtn.hide</span><span class="jsdoc-syntax">();
 101                 }
 102             }
 103             </span><span class="jsdoc-comment">/** This region's collapsed element
 104             * @type Roo.Element */
 105             </span><span class="jsdoc-var">this.collapsedEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mgr.el.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-collapsed x-layout-collapsed-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[
 106                 {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-collapsed-tools&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">:[{</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-ctools-inner&quot;</span><span class="jsdoc-syntax">}]}
 107             ]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 108             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.floatable </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 109                </span><span class="jsdoc-var">this.collapsedEl.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-collapsed-over&quot;</span><span class="jsdoc-syntax">);
 110                </span><span class="jsdoc-var">this.collapsedEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 111             }
 112
 113             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsedTitle </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;north&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">)) {
 114                 </span><span class="jsdoc-var">this.collapsedTitleTextEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dh.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl.dom</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-unselectable x-layout-panel-hd-text&quot;</span><span class="jsdoc-syntax">,
 115                    </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;message&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">unselectable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-string">&quot;float&quot;</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">}});
 116                </span><span class="jsdoc-var">this.collapsedTitleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.collapsedTitle</span><span class="jsdoc-syntax">;
 117              }
 118             </span><span class="jsdoc-var">this.expandBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createTool</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedEl.dom.firstChild.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;x-layout-expand-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">);
 119             </span><span class="jsdoc-var">this.expandBtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 120         }
 121         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapseBtn</span><span class="jsdoc-syntax">){
 122             </span><span class="jsdoc-var">this.collapseBtn.setVisible</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsible </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 123         }
 124         </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.cmargins </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">||
 125                          (</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;west&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;east&quot; </span><span class="jsdoc-syntax">?
 126                              {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 2, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:2, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 0} :
 127                              {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 2, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 2});
 128         </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.margins </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.margins </span><span class="jsdoc-syntax">|| {</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">: 0};
 129         </span><span class="jsdoc-var">this.bottomTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.tabPosition </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">;
 130         </span><span class="jsdoc-var">this.autoScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.autoScroll </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 131         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoScroll</span><span class="jsdoc-syntax">){
 132             </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">);
 133         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 134             </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
 135         }
 136         </span><span class="jsdoc-comment">//if(c.titlebar !== false){
 137             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">c.titlebar </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 138                 </span><span class="jsdoc-var">this.titleEl.hide</span><span class="jsdoc-syntax">();
 139             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 140                 </span><span class="jsdoc-var">this.titleEl.show</span><span class="jsdoc-syntax">();
 141                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">){
 142                     </span><span class="jsdoc-var">this.titleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.title</span><span class="jsdoc-syntax">;
 143                 }
 144             }
 145         </span><span class="jsdoc-comment">//}
 146         </span><span class="jsdoc-var">this.duration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.duration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">30;
 147         </span><span class="jsdoc-var">this.slideDuration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.slideDuration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">45;
 148         </span><span class="jsdoc-var">this.config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
 149         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.collapsed</span><span class="jsdoc-syntax">){
 150             </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 151         }
 152         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.hidden</span><span class="jsdoc-syntax">){
 153             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 154         }
 155     },
 156     </span><span class="jsdoc-comment">/**
 157      * Returns true if this region is currently visible.
 158      * @return {Boolean}
 159      */
 160     </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 161         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.visible</span><span class="jsdoc-syntax">;
 162     },
 163
 164     </span><span class="jsdoc-comment">/**
 165      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
 166      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, &quot;&amp;amp;#160;&quot;)
 167      */
 168     </span><span class="jsdoc-var">setCollapsedTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
 169         </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">;
 170         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsedTitleTextEl</span><span class="jsdoc-syntax">){
 171             </span><span class="jsdoc-var">this.collapsedTitleTextEl.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">;
 172         }
 173     },
 174
 175     </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 176         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
 177         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
 178             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 179         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 180             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.collapsedEl.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 181         }
 182         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
 183     },
 184
 185     </span><span class="jsdoc-var">getMargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 186         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.cmargins </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.margins</span><span class="jsdoc-syntax">;
 187     },
 188
 189     </span><span class="jsdoc-var">highlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 190         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-panel-dragover&quot;</span><span class="jsdoc-syntax">);
 191     },
 192
 193     </span><span class="jsdoc-var">unhighlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 194         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-panel-dragover&quot;</span><span class="jsdoc-syntax">);
 195     },
 196
 197     </span><span class="jsdoc-var">updateBox </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">){
 198         </span><span class="jsdoc-var">this.box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
 199         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
 200             </span><span class="jsdoc-var">this.el.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
 201             </span><span class="jsdoc-var">this.el.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
 202             </span><span class="jsdoc-var">this.updateBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
 203         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 204             </span><span class="jsdoc-var">this.collapsedEl.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
 205             </span><span class="jsdoc-var">this.collapsedEl.dom.style.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;px&quot;</span><span class="jsdoc-syntax">;
 206             </span><span class="jsdoc-var">this.collapsedEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
 207         }
 208         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 209             </span><span class="jsdoc-var">this.tabs.autoSizeTabs</span><span class="jsdoc-syntax">();
 210         }
 211     },
 212
 213     </span><span class="jsdoc-var">updateBody </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
 214         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
 215             </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
 216             </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;rl&quot;</span><span class="jsdoc-syntax">);
 217             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">){
 218                 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">[0];
 219             }
 220         }
 221         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
 222             </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 223             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.titleEl.isDisplayed</span><span class="jsdoc-syntax">() ? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">this.titleEl.getHeight</span><span class="jsdoc-syntax">()||0) : </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 224             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
 225             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">){
 226                 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.config.adjustments</span><span class="jsdoc-syntax">[1];
 227             }
 228             </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 229             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 230                 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.syncHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 231             }
 232         }
 233         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize</span><span class="jsdoc-syntax">){
 234             </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.panelSize.width</span><span class="jsdoc-syntax">;
 235             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.panelSize.height</span><span class="jsdoc-syntax">;
 236         }
 237         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
 238             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activePanel.getEl</span><span class="jsdoc-syntax">();
 239             </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el.getWidth</span><span class="jsdoc-syntax">();
 240             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el.getHeight</span><span class="jsdoc-syntax">();
 241             </span><span class="jsdoc-var">this.panelSize </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
 242             </span><span class="jsdoc-var">this.activePanel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 243         }
 244         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 245             </span><span class="jsdoc-var">this.tabs.el.repaint</span><span class="jsdoc-syntax">();
 246         }
 247     },
 248
 249     </span><span class="jsdoc-comment">/**
 250      * Returns the container element for this region.
 251      * @return {Roo.Element}
 252      */
 253     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 254         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 255     },
 256
 257     </span><span class="jsdoc-comment">/**
 258      * Hides this region.
 259      */
 260     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 261         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
 262             </span><span class="jsdoc-var">this.el.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;-2000px&quot;</span><span class="jsdoc-syntax">;
 263             </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 264         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 265             </span><span class="jsdoc-var">this.collapsedEl.dom.style.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;-2000px&quot;</span><span class="jsdoc-syntax">;
 266             </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">();
 267         }
 268         </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 269         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 270     },
 271
 272     </span><span class="jsdoc-comment">/**
 273      * Shows this region if it was previously hidden.
 274      */
 275     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 276         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">){
 277             </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 278         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 279             </span><span class="jsdoc-var">this.collapsedEl.show</span><span class="jsdoc-syntax">();
 280         }
 281         </span><span class="jsdoc-var">this.visible </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 282         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;visibilitychange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 283     },
 284
 285     </span><span class="jsdoc-var">closeClicked </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 286         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">){
 287             </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">);
 288         }
 289     },
 290
 291     </span><span class="jsdoc-var">collapseClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 292         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isSlid</span><span class="jsdoc-syntax">){
 293            </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
 294            </span><span class="jsdoc-var">this.slideIn</span><span class="jsdoc-syntax">();
 295         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 296            </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
 297            </span><span class="jsdoc-var">this.slideOut</span><span class="jsdoc-syntax">();
 298         }
 299     },
 300
 301     </span><span class="jsdoc-comment">/**
 302      * Collapses this region.
 303      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
 304      */
 305     </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">skipAnim</span><span class="jsdoc-syntax">){
 306         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.collapsed</span><span class="jsdoc-syntax">) {
 307             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 308         }
 309         </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 310         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 311             </span><span class="jsdoc-var">this.split.el.hide</span><span class="jsdoc-syntax">();
 312         }
 313         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.animate </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 314             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 315             </span><span class="jsdoc-var">this.animateCollapse</span><span class="jsdoc-syntax">();
 316         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 317             </span><span class="jsdoc-var">this.el.setLocation</span><span class="jsdoc-syntax">(-20000,-20000);
 318             </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 319             </span><span class="jsdoc-var">this.collapsedEl.show</span><span class="jsdoc-syntax">();
 320             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;collapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 321             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 322         }
 323     },
 324
 325     </span><span class="jsdoc-var">animateCollapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 326         </span><span class="jsdoc-comment">// overridden
 327     </span><span class="jsdoc-syntax">},
 328
 329     </span><span class="jsdoc-comment">/**
 330      * Expands this region if it was previously collapsed.
 331      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
 332      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
 333      */
 334     </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">skipAnim</span><span class="jsdoc-syntax">){
 335         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 336             </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
 337         }
 338         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.hasActiveFx</span><span class="jsdoc-syntax">()) {
 339             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 340         }
 341         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isSlid</span><span class="jsdoc-syntax">){
 342             </span><span class="jsdoc-var">this.afterSlideIn</span><span class="jsdoc-syntax">();
 343             </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 344         }
 345         </span><span class="jsdoc-var">this.collapsed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 346         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.animate </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">skipAnim </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 347             </span><span class="jsdoc-var">this.animateExpand</span><span class="jsdoc-syntax">();
 348         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 349             </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 350             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.split</span><span class="jsdoc-syntax">){
 351                 </span><span class="jsdoc-var">this.split.el.show</span><span class="jsdoc-syntax">();
 352             }
 353             </span><span class="jsdoc-var">this.collapsedEl.setLocation</span><span class="jsdoc-syntax">(-2000,-2000);
 354             </span><span class="jsdoc-var">this.collapsedEl.hide</span><span class="jsdoc-syntax">();
 355             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 356             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;expanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 357         }
 358     },
 359
 360     </span><span class="jsdoc-var">animateExpand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 361         </span><span class="jsdoc-comment">// overridden
 362     </span><span class="jsdoc-syntax">},
 363
 364     </span><span class="jsdoc-var">initTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 365     {
 366         </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
 367         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.TabPanel</span><span class="jsdoc-syntax">(
 368                 </span><span class="jsdoc-var">this.bodyEl.dom</span><span class="jsdoc-syntax">,
 369                 {
 370                     </span><span class="jsdoc-var">tabPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bottomTabs </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'bottom' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">,
 371                     </span><span class="jsdoc-var">disableTooltips</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.config.disableTabTips</span><span class="jsdoc-syntax">,
 372                     </span><span class="jsdoc-var">toolbar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.config.toolbar
 373                 </span><span class="jsdoc-syntax">}
 374         );
 375         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.hideTabs</span><span class="jsdoc-syntax">){
 376             </span><span class="jsdoc-var">ts.stripWrap.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 377         }
 378         </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">;
 379         </span><span class="jsdoc-var">ts.resizeTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.resizeTabs </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 380         </span><span class="jsdoc-var">ts.minTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.minTabWidth </span><span class="jsdoc-syntax">|| 40;
 381         </span><span class="jsdoc-var">ts.maxTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.maxTabWidth </span><span class="jsdoc-syntax">|| 250;
 382         </span><span class="jsdoc-var">ts.preferredTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.preferredTabWidth </span><span class="jsdoc-syntax">|| 150;
 383         </span><span class="jsdoc-var">ts.monitorResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 384         </span><span class="jsdoc-var">ts.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.config.autoScroll </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
 385         </span><span class="jsdoc-var">ts.bodyEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-layout-tabs-body'</span><span class="jsdoc-syntax">);
 386         </span><span class="jsdoc-var">this.panels.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initPanelAsTab</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 387     },
 388
 389     </span><span class="jsdoc-var">initPanelAsTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 390         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.addTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel.getTitle</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
 391                     </span><span class="jsdoc-var">this.config.closeOnTab </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">panel.isClosable</span><span class="jsdoc-syntax">());
 392         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 393             </span><span class="jsdoc-var">ti.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip</span><span class="jsdoc-syntax">);
 394         }
 395         </span><span class="jsdoc-var">ti.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 396               </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 397         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 398         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.closeOnTab</span><span class="jsdoc-syntax">){
 399             </span><span class="jsdoc-var">ti.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeclose&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 400                 </span><span class="jsdoc-var">e.cancel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 401                 </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 402             }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 403         }
 404         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">;
 405     },
 406
 407     </span><span class="jsdoc-var">updatePanelTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
 408         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 409             </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
 410         }
 411         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 412             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.getTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 413             </span><span class="jsdoc-var">ti.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
 414             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 415                 </span><span class="jsdoc-var">ti.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.tabTip</span><span class="jsdoc-syntax">);
 416             }
 417         }
 418     },
 419
 420     </span><span class="jsdoc-var">updateTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">){
 421         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.titleTextEl </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.config.title</span><span class="jsdoc-syntax">){
 422             </span><span class="jsdoc-var">this.titleTextEl.innerHTML </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">title.length </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">);
 423         }
 424     },
 425
 426     </span><span class="jsdoc-var">setActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 427         </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 428         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 429             </span><span class="jsdoc-var">this.activePanel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 430         }
 431         </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 432         </span><span class="jsdoc-var">panel.setActiveState</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 433         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize</span><span class="jsdoc-syntax">){
 434             </span><span class="jsdoc-var">panel.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panelSize.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.panelSize.height</span><span class="jsdoc-syntax">);
 435         }
 436         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.closeBtn</span><span class="jsdoc-syntax">){
 437             </span><span class="jsdoc-var">this.closeBtn.setVisible</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.config.closeOnTab </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.isSlid </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">panel.isClosable</span><span class="jsdoc-syntax">());
 438         }
 439         </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getTitle</span><span class="jsdoc-syntax">());
 440         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 441             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;invalidated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 442         }
 443         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelactivated&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 444     },
 445
 446     </span><span class="jsdoc-comment">/**
 447      * Shows the specified panel.
 448      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
 449      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
 450      */
 451     </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">panel</span><span class="jsdoc-syntax">)
 452     {
 453         </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 454         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 455             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 456                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.getTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 457                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.isHidden</span><span class="jsdoc-syntax">()){
 458                     </span><span class="jsdoc-var">this.tabs.unhideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.id</span><span class="jsdoc-syntax">);
 459                 }
 460                 </span><span class="jsdoc-var">tab.activate</span><span class="jsdoc-syntax">();
 461             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 462                 </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 463             }
 464         }
 465         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 466     },
 467
 468     </span><span class="jsdoc-comment">/**
 469      * Get the active panel for this region.
 470      * @return {Roo.ContentPanel} The active panel or null
 471      */
 472     </span><span class="jsdoc-var">getActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 473         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.activePanel</span><span class="jsdoc-syntax">;
 474     },
 475
 476     </span><span class="jsdoc-var">validateVisibility </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 477         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() &lt; 1){
 478             </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">);
 479             </span><span class="jsdoc-var">this.closeBtn.hide</span><span class="jsdoc-syntax">();
 480             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 481         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 482             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
 483                 </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 484             }
 485         }
 486     },
 487
 488     </span><span class="jsdoc-comment">/**
 489      * Adds the passed ContentPanel(s) to this region.
 490      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
 491      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
 492      */
 493     </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">panel</span><span class="jsdoc-syntax">){
 494         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){
 495             </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">arguments.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">++) {
 496                 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 497             }
 498             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 499         }
 500         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">)){
 501             </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 502             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 503         }
 504         </span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 505         </span><span class="jsdoc-var">this.panels.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 506         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() == 1 &amp;&amp; !</span><span class="jsdoc-var">this.config.alwaysShowTabs</span><span class="jsdoc-syntax">){
 507             </span><span class="jsdoc-var">this.bodyEl.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
 508             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.background </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 509                 </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 510             }
 511             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 512             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 513         }
 514         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 515             </span><span class="jsdoc-var">this.initTabs</span><span class="jsdoc-syntax">();
 516         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 517             </span><span class="jsdoc-var">this.initPanelAsTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 518         }
 519         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.background </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 520             </span><span class="jsdoc-var">this.tabs.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 521         }
 522         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;paneladded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 523         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 524     },
 525
 526     </span><span class="jsdoc-comment">/**
 527      * Hides the tab for the specified panel.
 528      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 529      */
 530     </span><span class="jsdoc-var">hidePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 531         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">))){
 532             </span><span class="jsdoc-var">this.tabs.hideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 533         }
 534     },
 535
 536     </span><span class="jsdoc-comment">/**
 537      * Unhides the tab for a previously hidden panel.
 538      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 539      */
 540     </span><span class="jsdoc-var">unhidePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 541         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">))){
 542             </span><span class="jsdoc-var">this.tabs.unhideTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 543         }
 544     },
 545
 546     </span><span class="jsdoc-var">clearPanels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 547         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() &gt; 0){
 548              </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.first</span><span class="jsdoc-syntax">());
 549         }
 550     },
 551
 552     </span><span class="jsdoc-comment">/**
 553      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
 554      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 555      * @param {Boolean} preservePanel Overrides the config preservePanel option
 556      * @return {Roo.ContentPanel} The panel that was removed
 557      */
 558     </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">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
 559         </span><span class="jsdoc-var">panel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 560         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 561             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 562         }
 563         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
 564         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeremove&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 565         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.cancel </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 566             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 567         }
 568         </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.config.preservePanels </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">panel.preserve </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 569         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">panelId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">panel.getId</span><span class="jsdoc-syntax">();
 570         </span><span class="jsdoc-var">this.panels.removeKey</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
 571         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
 572             </span><span class="jsdoc-var">document.body.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
 573         }
 574         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">){
 575             </span><span class="jsdoc-var">this.tabs.removeTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">);
 576         }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">preservePanel</span><span class="jsdoc-syntax">){
 577             </span><span class="jsdoc-var">this.bodyEl.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
 578         }
 579         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panels.getCount</span><span class="jsdoc-syntax">() == 1 &amp;&amp; </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.config.alwaysShowTabs</span><span class="jsdoc-syntax">){
 580             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.panels.first</span><span class="jsdoc-syntax">();
 581             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// temp holder to keep IE from deleting the node
 582             </span><span class="jsdoc-var">tempEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
 583             </span><span class="jsdoc-var">this.bodyEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 584             </span><span class="jsdoc-var">this.bodyEl.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
 585             </span><span class="jsdoc-var">tempEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 586             </span><span class="jsdoc-var">this.updateTitle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.getTitle</span><span class="jsdoc-syntax">());
 587             </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 588             </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.config.autoScroll </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;auto&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
 589             </span><span class="jsdoc-var">this.setActivePanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
 590         }
 591         </span><span class="jsdoc-var">panel.setRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 592         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
 593             </span><span class="jsdoc-var">this.activePanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 594         }
 595         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.autoDestroy </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">preservePanel </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 596             </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">panel.destroy</span><span class="jsdoc-syntax">();}</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
 597         }
 598         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;panelremoved&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
 599         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">;
 600     },
 601
 602     </span><span class="jsdoc-comment">/**
 603      * Returns the TabPanel component used by this region
 604      * @return {Roo.TabPanel}
 605      */
 606     </span><span class="jsdoc-var">getTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 607         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">;
 608     },
 609
 610     </span><span class="jsdoc-var">createTool </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">){
 611         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentEl</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-tools-button&quot;</span><span class="jsdoc-syntax">,
 612             </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">: [{</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-layout-tools-button-inner &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">className</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">}]}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 613         </span><span class="jsdoc-var">btn.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-tools-button-over&quot;</span><span class="jsdoc-syntax">);
 614         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
 615     }
 616 });</span></code></body></html>