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

   1 <html><head><title>../roojs1/Roo/TabPanel.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.TabPanel
  13  * @extends Roo.util.Observable
  14  * A lightweight tab container.
  15  * &lt;br&gt;&lt;br&gt;
  16  * Usage:
  17  * &lt;pre&gt;&lt;code&gt;
  18 // basic tabs 1, built from existing content
  19 var tabs = new Roo.TabPanel(&quot;tabs1&quot;);
  20 tabs.addTab(&quot;script&quot;, &quot;View Script&quot;);
  21 tabs.addTab(&quot;markup&quot;, &quot;View Markup&quot;);
  22 tabs.activate(&quot;script&quot;);
  23
  24 // more advanced tabs, built from javascript
  25 var jtabs = new Roo.TabPanel(&quot;jtabs&quot;);
  26 jtabs.addTab(&quot;jtabs-1&quot;, &quot;Normal Tab&quot;, &quot;My content was added during construction.&quot;);
  27
  28 // set up the UpdateManager
  29 var tab2 = jtabs.addTab(&quot;jtabs-2&quot;, &quot;Ajax Tab 1&quot;);
  30 var updater = tab2.getUpdateManager();
  31 updater.setDefaultUrl(&quot;ajax1.htm&quot;);
  32 tab2.on('activate', updater.refresh, updater, true);
  33
  34 // Use setUrl for Ajax loading
  35 var tab3 = jtabs.addTab(&quot;jtabs-3&quot;, &quot;Ajax Tab 2&quot;);
  36 tab3.setUrl(&quot;ajax2.htm&quot;, null, true);
  37
  38 // Disabled tab
  39 var tab4 = jtabs.addTab(&quot;tabs1-5&quot;, &quot;Disabled Tab&quot;, &quot;Can't see me cause I'm disabled&quot;);
  40 tab4.disable();
  41
  42 jtabs.activate(&quot;jtabs-1&quot;);
  43  * &lt;/code&gt;&lt;/pre&gt;
  44  * @constructor
  45  * Create a new TabPanel.
  46  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
  47  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
  48  */
  49 </span><span class="jsdoc-var">Roo.TabPanel </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">){
  50     </span><span class="jsdoc-comment">/**
  51     * The container element for this TabPanel.
  52     * @type Roo.Element
  53     */
  54     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  55     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  56         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;boolean&quot;</span><span class="jsdoc-syntax">){
  57             </span><span class="jsdoc-var">this.tabPosition </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;bottom&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">;
  58         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  59             </span><span class="jsdoc-var">Roo.apply</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">);
  60         }
  61     }
  62     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabPosition </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">){
  63         </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.createBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">));
  64         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-tabs-bottom&quot;</span><span class="jsdoc-syntax">);
  65     }
  66     </span><span class="jsdoc-var">this.stripWrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.createStrip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  67     </span><span class="jsdoc-var">this.stripEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.createStripList</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stripWrap.dom</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  68     </span><span class="jsdoc-var">this.stripBody </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stripWrap.dom.firstChild.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  69     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
  70         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stripWrap.dom.firstChild</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow-x&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
  71     }
  72     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabPosition </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;bottom&quot;</span><span class="jsdoc-syntax">){
  73     </span><span class="jsdoc-comment">/** The body element that contains {@link Roo.TabPanelItem} bodies.
  74      * @type Roo.Element
  75      */
  76       </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.createBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">));
  77       </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-tabs-top&quot;</span><span class="jsdoc-syntax">);
  78     }
  79     </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= [];
  80
  81     </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
  82
  83     </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  84     </span><span class="jsdoc-var">this.activateDelegate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activate.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  85
  86     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  87         </span><span class="jsdoc-comment">/**
  88          * @event tabchange
  89          * Fires when the active tab changes
  90          * @param {Roo.TabPanel} this
  91          * @param {Roo.TabPanelItem} activePanel The new active tab
  92          */
  93         </span><span class="jsdoc-string">&quot;tabchange&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  94         </span><span class="jsdoc-comment">/**
  95          * @event beforetabchange
  96          * Fires before the active tab changes, set cancel to true on the &quot;e&quot; parameter to cancel the change
  97          * @param {Roo.TabPanel} this
  98          * @param {Object} e Set cancel to true on this object to cancel the tab change
  99          * @param {Roo.TabPanelItem} tab The tab being changed to
 100          */
 101         </span><span class="jsdoc-string">&quot;beforetabchange&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 102     </span><span class="jsdoc-syntax">});
 103
 104     </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 105     </span><span class="jsdoc-var">this.cpad </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
 106     </span><span class="jsdoc-var">this.hiddenCount </span><span class="jsdoc-syntax">= 0;
 107
 108     </span><span class="jsdoc-var">Roo.TabPanel.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 109 };
 110
 111 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.TabPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
 112         </span><span class="jsdoc-comment">/*
 113          *@cfg {String} tabPosition &quot;top&quot; or &quot;bottom&quot; (defaults to &quot;top&quot;)
 114          */
 115     </span><span class="jsdoc-var">tabPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">,
 116         </span><span class="jsdoc-comment">/*
 117          *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
 118          */
 119     </span><span class="jsdoc-var">currentTabWidth </span><span class="jsdoc-syntax">: 0,
 120         </span><span class="jsdoc-comment">/*
 121          *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
 122          */
 123     </span><span class="jsdoc-var">minTabWidth </span><span class="jsdoc-syntax">: 40,
 124         </span><span class="jsdoc-comment">/*
 125          *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
 126          */
 127     </span><span class="jsdoc-var">maxTabWidth </span><span class="jsdoc-syntax">: 250,
 128         </span><span class="jsdoc-comment">/*
 129          *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
 130          */
 131     </span><span class="jsdoc-var">preferredTabWidth </span><span class="jsdoc-syntax">: 175,
 132         </span><span class="jsdoc-comment">/*
 133          *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
 134          */
 135     </span><span class="jsdoc-var">resizeTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 136         </span><span class="jsdoc-comment">/*
 137          *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
 138          */
 139     </span><span class="jsdoc-var">monitorResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 140
 141     </span><span class="jsdoc-comment">/**
 142      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
 143      * @param {String} id The id of the div to use &lt;b&gt;or create&lt;/b&gt;
 144      * @param {String} text The text for the tab
 145      * @param {String} content (optional) Content to put in the TabPanelItem body
 146      * @param {Boolean} closable (optional) True to create a close icon on the tab
 147      * @return {Roo.TabPanelItem} The created TabPanelItem
 148      */
 149     </span><span class="jsdoc-var">addTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 150         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.TabPanelItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">);
 151         </span><span class="jsdoc-var">this.addTabItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 152         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">){
 153             </span><span class="jsdoc-var">item.setContent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">);
 154         }
 155         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 156     },
 157
 158     </span><span class="jsdoc-comment">/**
 159      * Returns the {@link Roo.TabPanelItem} with the specified id/index
 160      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
 161      * @return {Roo.TabPanelItem}
 162      */
 163     </span><span class="jsdoc-var">getTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 164         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 165     },
 166
 167     </span><span class="jsdoc-comment">/**
 168      * Hides the {@link Roo.TabPanelItem} with the specified id/index
 169      * @param {String/Number} id The id or index of the TabPanelItem to hide.
 170      */
 171     </span><span class="jsdoc-var">hideTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 172         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 173         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t.isHidden</span><span class="jsdoc-syntax">()){
 174            </span><span class="jsdoc-var">t.setHidden</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 175            </span><span class="jsdoc-var">this.hiddenCount</span><span class="jsdoc-syntax">++;
 176            </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 177         }
 178     },
 179
 180     </span><span class="jsdoc-comment">/**
 181      * &quot;Unhides&quot; the {@link Roo.TabPanelItem} with the specified id/index.
 182      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
 183      */
 184     </span><span class="jsdoc-var">unhideTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 185         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 186         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.isHidden</span><span class="jsdoc-syntax">()){
 187            </span><span class="jsdoc-var">t.setHidden</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 188            </span><span class="jsdoc-var">this.hiddenCount</span><span class="jsdoc-syntax">--;
 189            </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 190         }
 191     },
 192
 193     </span><span class="jsdoc-comment">/**
 194      * Adds an existing {@link Roo.TabPanelItem}.
 195      * @param {Roo.TabPanelItem} item The TabPanelItem to add
 196      */
 197     </span><span class="jsdoc-var">addTabItem </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
 198         </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">item.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 199         </span><span class="jsdoc-var">this.items.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 200         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeTabs</span><span class="jsdoc-syntax">){
 201            </span><span class="jsdoc-var">item.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.currentTabWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.preferredTabWidth</span><span class="jsdoc-syntax">);
 202            </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 203         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 204             </span><span class="jsdoc-var">item.autoSize</span><span class="jsdoc-syntax">();
 205         }
 206     },
 207
 208     </span><span class="jsdoc-comment">/**
 209      * Removes a {@link Roo.TabPanelItem}.
 210      * @param {String/Number} id The id or index of the TabPanelItem to remove.
 211      */
 212     </span><span class="jsdoc-var">removeTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 213         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
 214         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 215         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; }
 216         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">);
 217         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">&gt; 1){
 218             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newTab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getNextAvailable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 219             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newTab</span><span class="jsdoc-syntax">) {
 220                 </span><span class="jsdoc-var">newTab.activate</span><span class="jsdoc-syntax">();
 221             }
 222         }
 223         </span><span class="jsdoc-var">this.stripEl.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.pnode.dom</span><span class="jsdoc-syntax">);
 224         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.bodyEl.dom.parentNode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.bodyEl.dom</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// if it was moved already prevent error
 225             </span><span class="jsdoc-var">this.bodyEl.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.bodyEl.dom</span><span class="jsdoc-syntax">);
 226         }
 227         </span><span class="jsdoc-var">items.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1);
 228         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tab.id</span><span class="jsdoc-syntax">];
 229         </span><span class="jsdoc-var">tab.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;close&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">);
 230         </span><span class="jsdoc-var">tab.purgeListeners</span><span class="jsdoc-syntax">();
 231         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 232     },
 233
 234     </span><span class="jsdoc-var">getNextAvailable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">){
 235         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
 236         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">;
 237         </span><span class="jsdoc-comment">// look for a next tab that will slide over to
 238         // replace the one being removed
 239         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">items.length</span><span class="jsdoc-syntax">){
 240             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[++</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
 241             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">item.isHidden</span><span class="jsdoc-syntax">()){
 242                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 243             }
 244         }
 245         </span><span class="jsdoc-comment">// if one isn't found select the previous tab (on the left)
 246         </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">;
 247         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">&gt;= 0){
 248             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[--</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
 249             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">item.isHidden</span><span class="jsdoc-syntax">()){
 250                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 251             }
 252         }
 253         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 254     },
 255
 256     </span><span class="jsdoc-comment">/**
 257      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
 258      * @param {String/Number} id The id or index of the TabPanelItem to disable.
 259      */
 260     </span><span class="jsdoc-var">disableTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 261         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 262         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">){
 263             </span><span class="jsdoc-var">tab.disable</span><span class="jsdoc-syntax">();
 264         }
 265     },
 266
 267     </span><span class="jsdoc-comment">/**
 268      * Enables a {@link Roo.TabPanelItem} that is disabled.
 269      * @param {String/Number} id The id or index of the TabPanelItem to enable.
 270      */
 271     </span><span class="jsdoc-var">enableTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 272         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 273         </span><span class="jsdoc-var">tab.enable</span><span class="jsdoc-syntax">();
 274     },
 275
 276     </span><span class="jsdoc-comment">/**
 277      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
 278      * @param {String/Number} id The id or index of the TabPanelItem to activate.
 279      * @return {Roo.TabPanelItem} The TabPanelItem.
 280      */
 281     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 282         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 283         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">){
 284             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 285         }
 286         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">tab.disabled</span><span class="jsdoc-syntax">){
 287             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
 288         }
 289         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
 290         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforetabchange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">);
 291         </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">&amp;&amp; !</span><span class="jsdoc-var">tab.disabled</span><span class="jsdoc-syntax">){
 292             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">){
 293                 </span><span class="jsdoc-var">this.active.hide</span><span class="jsdoc-syntax">();
 294             }
 295             </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
 296             </span><span class="jsdoc-var">this.active.show</span><span class="jsdoc-syntax">();
 297             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tabchange&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">);
 298         }
 299         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
 300     },
 301
 302     </span><span class="jsdoc-comment">/**
 303      * Gets the active {@link Roo.TabPanelItem}.
 304      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
 305      */
 306     </span><span class="jsdoc-var">getActiveTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 307         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
 308     },
 309
 310     </span><span class="jsdoc-comment">/**
 311      * Updates the tab body element to fit the height of the container element
 312      * for overflow scrolling
 313      * @param {Number} targetHeight (optional) Override the starting height from the elements height
 314      */
 315     </span><span class="jsdoc-var">syncHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targetHeight</span><span class="jsdoc-syntax">){
 316         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">targetHeight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.getHeight</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">)-</span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
 317         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bodyEl.getMargins</span><span class="jsdoc-syntax">();
 318         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">this.stripWrap.getHeight</span><span class="jsdoc-syntax">()||0)-(</span><span class="jsdoc-var">bm.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">bm.bottom</span><span class="jsdoc-syntax">);
 319         </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">);
 320         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">;
 321     },
 322
 323     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 324         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorResize</span><span class="jsdoc-syntax">){
 325             </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 326         }
 327     },
 328
 329     </span><span class="jsdoc-comment">/**
 330      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
 331      */
 332     </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 333         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 334     },
 335
 336     </span><span class="jsdoc-comment">/**
 337      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
 338      */
 339     </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 340         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 341         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 342     },
 343
 344     </span><span class="jsdoc-comment">/**
 345      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
 346      */
 347     </span><span class="jsdoc-var">autoSizeTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 348         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">;
 349         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vcount </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.hiddenCount</span><span class="jsdoc-syntax">;
 350         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.resizeTabs </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">&lt; 1 || </span><span class="jsdoc-var">vcount </span><span class="jsdoc-syntax">&lt; 1 || </span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 351         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.cpad</span><span class="jsdoc-syntax">, 10);
 352         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">availWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">vcount</span><span class="jsdoc-syntax">);
 353         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.stripBody</span><span class="jsdoc-syntax">;
 354         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.getWidth</span><span class="jsdoc-syntax">() &gt; </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">){
 355             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
 356             </span><span class="jsdoc-var">this.setTabWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">availWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minTabWidth</span><span class="jsdoc-syntax">)-2);
 357             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">availWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.minTabWidth</span><span class="jsdoc-syntax">){
 358                 </span><span class="jsdoc-comment">/*if(!this.sleft){    // incomplete scrolling code
 359                     this.createScrollButtons();
 360                 }
 361                 this.showScroll();
 362                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
 363             </span><span class="jsdoc-syntax">}
 364         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 365             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.currentTabWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.preferredTabWidth</span><span class="jsdoc-syntax">){
 366                 </span><span class="jsdoc-var">this.setTabWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">availWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.preferredTabWidth</span><span class="jsdoc-syntax">)-2);
 367             }
 368         }
 369     },
 370
 371     </span><span class="jsdoc-comment">/**
 372      * Returns the number of tabs in this TabPanel.
 373      * @return {Number}
 374      */
 375      </span><span class="jsdoc-var">getCount </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 376          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">;
 377      },
 378
 379     </span><span class="jsdoc-comment">/**
 380      * Resizes all the tabs to the passed width
 381      * @param {Number} The new width
 382      */
 383     </span><span class="jsdoc-var">setTabWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">){
 384         </span><span class="jsdoc-var">this.currentTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
 385         </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.items.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">++) {
 386                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.isHidden</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 387         }
 388     },
 389
 390     </span><span class="jsdoc-comment">/**
 391      * Destroys this TabPanel
 392      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
 393      */
 394     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
 395         </span><span class="jsdoc-var">Roo.EventManager.removeResizeListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 396         </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.items.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">++){
 397             </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.purgeListeners</span><span class="jsdoc-syntax">();
 398         }
 399         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 400             </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 401             </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 402         }
 403     }
 404 });
 405
 406 </span><span class="jsdoc-comment">/**
 407  * @class Roo.TabPanelItem
 408  * @extends Roo.util.Observable
 409  * Represents an individual item (tab plus body) in a TabPanel.
 410  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
 411  * @param {String} id The id of this TabPanelItem
 412  * @param {String} text The text for the tab of this TabPanelItem
 413  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
 414  */
 415 </span><span class="jsdoc-var">Roo.TabPanelItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tabPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 416     </span><span class="jsdoc-comment">/**
 417      * The {@link Roo.TabPanel} this TabPanelItem belongs to
 418      * @type Roo.TabPanel
 419      */
 420     </span><span class="jsdoc-var">this.tabPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tabPanel</span><span class="jsdoc-syntax">;
 421     </span><span class="jsdoc-comment">/**
 422      * The id for this TabPanelItem
 423      * @type String
 424      */
 425     </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
 426     </span><span class="jsdoc-comment">/** @private */
 427     </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 428     </span><span class="jsdoc-comment">/** @private */
 429     </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 430     </span><span class="jsdoc-comment">/** @private */
 431     </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 432     </span><span class="jsdoc-var">this.closable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">;
 433
 434     </span><span class="jsdoc-comment">/**
 435      * The body element for this TabPanelItem.
 436      * @type Roo.Element
 437      */
 438     </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tabPanel.createItemBody</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tabPanel.bodyEl.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">));
 439     </span><span class="jsdoc-var">this.bodyEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.VISIBILITY</span><span class="jsdoc-syntax">);
 440     </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;block&quot;</span><span class="jsdoc-syntax">);
 441     </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;zoom&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;1&quot;</span><span class="jsdoc-syntax">);
 442     </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
 443
 444     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tabPanel.createStripElements</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tabPanel.stripEl.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">);
 445     </span><span class="jsdoc-comment">/** @private */
 446     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 447     </span><span class="jsdoc-var">this.inner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els.inner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 448     </span><span class="jsdoc-var">this.textEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.firstChild.firstChild.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 449     </span><span class="jsdoc-var">this.pnode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els.el.parentNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 450     </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTabMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 451     </span><span class="jsdoc-var">this.el.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.onTabClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 452     </span><span class="jsdoc-comment">/** @private */
 453     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 454         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">els.close</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 455         </span><span class="jsdoc-var">c.dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.closeText</span><span class="jsdoc-syntax">;
 456         </span><span class="jsdoc-var">c.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;close-over&quot;</span><span class="jsdoc-syntax">);
 457         </span><span class="jsdoc-var">c.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.closeClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 458      }
 459
 460     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
 461          </span><span class="jsdoc-comment">/**
 462          * @event activate
 463          * Fires when this tab becomes the active tab.
 464          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 465          * @param {Roo.TabPanelItem} this
 466          */
 467         </span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 468         </span><span class="jsdoc-comment">/**
 469          * @event beforeclose
 470          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
 471          * @param {Roo.TabPanelItem} this
 472          * @param {Object} e Set cancel to true on this object to cancel the close.
 473          */
 474         </span><span class="jsdoc-string">&quot;beforeclose&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 475         </span><span class="jsdoc-comment">/**
 476          * @event close
 477          * Fires when this tab is closed.
 478          * @param {Roo.TabPanelItem} this
 479          */
 480          </span><span class="jsdoc-string">&quot;close&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 481         </span><span class="jsdoc-comment">/**
 482          * @event deactivate
 483          * Fires when this tab is no longer the active tab.
 484          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 485          * @param {Roo.TabPanelItem} this
 486          */
 487          </span><span class="jsdoc-string">&quot;deactivate&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 488     </span><span class="jsdoc-syntax">});
 489     </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 490
 491     </span><span class="jsdoc-var">Roo.TabPanelItem.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 492 };
 493
 494 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.TabPanelItem</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
 495     </span><span class="jsdoc-var">purgeListeners </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 496        </span><span class="jsdoc-var">Roo.util.Observable.prototype.purgeListeners.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 497        </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
 498     },
 499     </span><span class="jsdoc-comment">/**
 500      * Shows this TabPanelItem -- this &lt;b&gt;does not&lt;/b&gt; deactivate the currently active TabPanelItem.
 501      */
 502     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 503         </span><span class="jsdoc-var">this.pnode.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">);
 504         </span><span class="jsdoc-var">this.showAction</span><span class="jsdoc-syntax">();
 505         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isOpera</span><span class="jsdoc-syntax">){
 506             </span><span class="jsdoc-var">this.tabPanel.stripWrap.repaint</span><span class="jsdoc-syntax">();
 507         }
 508         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 509     },
 510
 511     </span><span class="jsdoc-comment">/**
 512      * Returns true if this tab is the active tab.
 513      * @return {Boolean}
 514      */
 515     </span><span class="jsdoc-var">isActive </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 516         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.tabPanel.getActiveTab</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 517     },
 518
 519     </span><span class="jsdoc-comment">/**
 520      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
 521      */
 522     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 523         </span><span class="jsdoc-var">this.pnode.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">);
 524         </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
 525         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;deactivate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabPanel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 526     },
 527
 528     </span><span class="jsdoc-var">hideAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 529         </span><span class="jsdoc-var">this.bodyEl.hide</span><span class="jsdoc-syntax">();
 530         </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">);
 531         </span><span class="jsdoc-var">this.bodyEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-20000px&quot;</span><span class="jsdoc-syntax">);
 532         </span><span class="jsdoc-var">this.bodyEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;-20000px&quot;</span><span class="jsdoc-syntax">);
 533     },
 534
 535     </span><span class="jsdoc-var">showAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 536         </span><span class="jsdoc-var">this.bodyEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
 537         </span><span class="jsdoc-var">this.bodyEl.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 538         </span><span class="jsdoc-var">this.bodyEl.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 539         </span><span class="jsdoc-var">this.bodyEl.show</span><span class="jsdoc-syntax">();
 540     },
 541
 542     </span><span class="jsdoc-comment">/**
 543      * Set the tooltip for the tab.
 544      * @param {String} tooltip The tab's tooltip
 545      */
 546     </span><span class="jsdoc-var">setTooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
 547         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.QuickTips </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.QuickTips.isEnabled</span><span class="jsdoc-syntax">()){
 548             </span><span class="jsdoc-var">this.textEl.dom.qtip </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 549             </span><span class="jsdoc-var">this.textEl.dom.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'title'</span><span class="jsdoc-syntax">);
 550         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 551             </span><span class="jsdoc-var">this.textEl.dom.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 552         }
 553     },
 554
 555     </span><span class="jsdoc-var">onTabClick </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">){
 556         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 557         </span><span class="jsdoc-var">this.tabPanel.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
 558     },
 559
 560     </span><span class="jsdoc-var">onTabMouseDown </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">){
 561         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 562         </span><span class="jsdoc-var">this.tabPanel.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
 563     },
 564
 565     </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 566         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.inner.getWidth</span><span class="jsdoc-syntax">();
 567     },
 568
 569     </span><span class="jsdoc-var">setWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">){
 570         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">iwidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.pnode.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
 571         </span><span class="jsdoc-var">this.inner.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iwidth</span><span class="jsdoc-syntax">);
 572         </span><span class="jsdoc-var">this.textEl.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iwidth</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">this.inner.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
 573         </span><span class="jsdoc-var">this.pnode.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 574     },
 575
 576     </span><span class="jsdoc-comment">/**
 577      * Show or hide the tab
 578      * @param {Boolean} hidden True to hide or false to show.
 579      */
 580     </span><span class="jsdoc-var">setHidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">){
 581         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">;
 582         </span><span class="jsdoc-var">this.pnode.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;display&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hidden </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;none&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 583     },
 584
 585     </span><span class="jsdoc-comment">/**
 586      * Returns true if this tab is &quot;hidden&quot;
 587      * @return {Boolean}
 588      */
 589     </span><span class="jsdoc-var">isHidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 590         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">;
 591     },
 592
 593     </span><span class="jsdoc-comment">/**
 594      * Returns the text for this tab
 595      * @return {String}
 596      */
 597     </span><span class="jsdoc-var">getText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 598         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">;
 599     },
 600
 601     </span><span class="jsdoc-var">autoSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 602         </span><span class="jsdoc-comment">//this.el.beginMeasure();
 603         </span><span class="jsdoc-var">this.textEl.setWidth</span><span class="jsdoc-syntax">(1);
 604         </span><span class="jsdoc-var">this.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.textEl.dom.scrollWidth</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.pnode.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.inner.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">));
 605         </span><span class="jsdoc-comment">//this.el.endMeasure();
 606     </span><span class="jsdoc-syntax">},
 607
 608     </span><span class="jsdoc-comment">/**
 609      * Sets the text for the tab (Note: this also sets the tooltip text)
 610      * @param {String} text The tab's text and tooltip
 611      */
 612     </span><span class="jsdoc-var">setText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
 613         </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 614         </span><span class="jsdoc-var">this.textEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
 615         </span><span class="jsdoc-var">this.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
 616         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabPanel.resizeTabs</span><span class="jsdoc-syntax">){
 617             </span><span class="jsdoc-var">this.autoSize</span><span class="jsdoc-syntax">();
 618         }
 619     },
 620     </span><span class="jsdoc-comment">/**
 621      * Activates this TabPanelItem -- this &lt;b&gt;does&lt;/b&gt; deactivate the currently active TabPanelItem.
 622      */
 623     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 624         </span><span class="jsdoc-var">this.tabPanel.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
 625     },
 626
 627     </span><span class="jsdoc-comment">/**
 628      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
 629      */
 630     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 631         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabPanel.active </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">){
 632             </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 633             </span><span class="jsdoc-var">this.pnode.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;disabled&quot;</span><span class="jsdoc-syntax">);
 634         }
 635     },
 636
 637     </span><span class="jsdoc-comment">/**
 638      * Enables this TabPanelItem if it was previously disabled.
 639      */
 640     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 641         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 642         </span><span class="jsdoc-var">this.pnode.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;disabled&quot;</span><span class="jsdoc-syntax">);
 643     },
 644
 645     </span><span class="jsdoc-comment">/**
 646      * Sets the content for this TabPanelItem.
 647      * @param {String} content The content
 648      * @param {Boolean} loadScripts true to look for and load scripts
 649      */
 650     </span><span class="jsdoc-var">setContent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">){
 651         </span><span class="jsdoc-var">this.bodyEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadScripts</span><span class="jsdoc-syntax">);
 652     },
 653
 654     </span><span class="jsdoc-comment">/**
 655      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
 656      * @return {Roo.UpdateManager} The UpdateManager
 657      */
 658     </span><span class="jsdoc-var">getUpdateManager </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 659         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.bodyEl.getUpdateManager</span><span class="jsdoc-syntax">();
 660     },
 661
 662     </span><span class="jsdoc-comment">/**
 663      * Set a URL to be used to load the content for this TabPanelItem.
 664      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
 665      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
 666      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
 667      * @return {Roo.UpdateManager} The UpdateManager
 668      */
 669     </span><span class="jsdoc-var">setUrl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">){
 670         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
 671             </span><span class="jsdoc-var">this.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">);
 672         }
 673         </span><span class="jsdoc-var">this.refreshDelegate </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._handleRefresh.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">]);
 674         </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">);
 675         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.bodyEl.getUpdateManager</span><span class="jsdoc-syntax">();
 676     },
 677
 678     </span><span class="jsdoc-comment">/** @private */
 679     </span><span class="jsdoc-var">_handleRefresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">loadOnce</span><span class="jsdoc-syntax">){
 680         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">loadOnce </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.loaded</span><span class="jsdoc-syntax">){
 681             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">updater </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bodyEl.getUpdateManager</span><span class="jsdoc-syntax">();
 682             </span><span class="jsdoc-var">updater.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">params</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._setLoaded.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
 683         }
 684     },
 685
 686     </span><span class="jsdoc-comment">/**
 687      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
 688      *   Will fail silently if the setUrl method has not been called.
 689      *   This does not activate the panel, just updates its content.
 690      */
 691     </span><span class="jsdoc-var">refresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 692         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
 693            </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 694            </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">();
 695         }
 696     },
 697
 698     </span><span class="jsdoc-comment">/** @private */
 699     </span><span class="jsdoc-var">_setLoaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 700         </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 701     },
 702
 703     </span><span class="jsdoc-comment">/** @private */
 704     </span><span class="jsdoc-var">closeClick </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">){
 705         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= {};
 706         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 707         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeclose&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 708         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.cancel </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
 709             </span><span class="jsdoc-var">this.tabPanel.removeTab</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
 710         }
 711     },
 712     </span><span class="jsdoc-comment">/**
 713      * The text displayed in the tooltip for the close icon.
 714      * @type String
 715      */
 716     </span><span class="jsdoc-var">closeText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Close this tab&quot;
 717 </span><span class="jsdoc-syntax">});
 718
 719 </span><span class="jsdoc-comment">/** @private */
 720 </span><span class="jsdoc-var">Roo.TabPanel.prototype.createStrip </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">){
 721     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">strip </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">);
 722     </span><span class="jsdoc-var">strip.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-tabs-wrap&quot;</span><span class="jsdoc-syntax">;
 723     </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">);
 724     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">;
 725 };
 726 </span><span class="jsdoc-comment">/** @private */
 727 </span><span class="jsdoc-var">Roo.TabPanel.prototype.createStripList </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">){
 728     </span><span class="jsdoc-comment">// div wrapper for retard IE
 729     </span><span class="jsdoc-var">strip.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;div class=&quot;x-tabs-strip-wrap&quot;&gt;&lt;table class=&quot;x-tabs-strip&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;'</span><span class="jsdoc-syntax">;
 730     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip.firstChild.firstChild.firstChild.firstChild</span><span class="jsdoc-syntax">;
 731 };
 732 </span><span class="jsdoc-comment">/** @private */
 733 </span><span class="jsdoc-var">Roo.TabPanel.prototype.createBody </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">){
 734     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </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">);
 735     </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;tab-body&quot;</span><span class="jsdoc-syntax">);
 736     </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-tabs-body&quot;</span><span class="jsdoc-syntax">);
 737     </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
 738     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 739 };
 740 </span><span class="jsdoc-comment">/** @private */
 741 </span><span class="jsdoc-var">Roo.TabPanel.prototype.createItemBody </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bodyEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
 742     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
 743     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">){
 744         </span><span class="jsdoc-var">body </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">);
 745         </span><span class="jsdoc-var">body.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
 746     }
 747     </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-tabs-item-body&quot;</span><span class="jsdoc-syntax">);
 748     </span><span class="jsdoc-var">bodyEl.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bodyEl.firstChild</span><span class="jsdoc-syntax">);
 749     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 750 };
 751 </span><span class="jsdoc-comment">/** @private */
 752 </span><span class="jsdoc-var">Roo.TabPanel.prototype.createStripElements </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stripEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 753     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td&quot;</span><span class="jsdoc-syntax">);
 754     </span><span class="jsdoc-var">stripEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 755     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 756         </span><span class="jsdoc-var">td.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-tabs-closable&quot;</span><span class="jsdoc-syntax">;
 757         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.closeTpl</span><span class="jsdoc-syntax">){
 758             </span><span class="jsdoc-var">this.closeTpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(
 759                </span><span class="jsdoc-string">'&lt;a href=&quot;#&quot; class=&quot;x-tabs-right&quot;&gt;&lt;span class=&quot;x-tabs-left&quot;&gt;&lt;em class=&quot;x-tabs-inner&quot;&gt;' </span><span class="jsdoc-syntax">+
 760                </span><span class="jsdoc-string">'&lt;span unselectable=&quot;on&quot;' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.disableTooltips </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' title=&quot;{text}&quot;'</span><span class="jsdoc-syntax">) +</span><span class="jsdoc-string">' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;' </span><span class="jsdoc-syntax">+
 761                </span><span class="jsdoc-string">'&lt;div unselectable=&quot;on&quot; class=&quot;close-icon&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;'
 762             </span><span class="jsdoc-syntax">);
 763         }
 764         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.closeTpl.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-string">&quot;text&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">});
 765         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">close </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">)[0];
 766         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">inner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;em&quot;</span><span class="jsdoc-syntax">)[0];
 767         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-string">&quot;el&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;close&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">close</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;inner&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">inner</span><span class="jsdoc-syntax">};
 768     } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 769         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabTpl</span><span class="jsdoc-syntax">){
 770             </span><span class="jsdoc-var">this.tabTpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(
 771                </span><span class="jsdoc-string">'&lt;a href=&quot;#&quot; class=&quot;x-tabs-right&quot;&gt;&lt;span class=&quot;x-tabs-left&quot;&gt;&lt;em class=&quot;x-tabs-inner&quot;&gt;' </span><span class="jsdoc-syntax">+
 772                </span><span class="jsdoc-string">'&lt;span unselectable=&quot;on&quot;' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.disableTooltips </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' title=&quot;{text}&quot;'</span><span class="jsdoc-syntax">) +</span><span class="jsdoc-string">' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;'
 773             </span><span class="jsdoc-syntax">);
 774         }
 775         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabTpl.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-string">&quot;text&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">});
 776         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">inner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;em&quot;</span><span class="jsdoc-syntax">)[0];
 777         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-string">&quot;el&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;inner&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">inner</span><span class="jsdoc-syntax">};
 778     }
 779 };</span></code></body></html>