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">)</span><span class="jsdoc-var">newTab.activate</span><span class="jsdoc-syntax">();
 220         }
 221         </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">);
 222         </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
 223             </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">);
 224         }
 225         </span><span class="jsdoc-var">items.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1);
 226         </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">];
 227         </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">);
 228         </span><span class="jsdoc-var">tab.purgeListeners</span><span class="jsdoc-syntax">();
 229         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 230     },
 231
 232     </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">){
 233         </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">;
 234         </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">;
 235         </span><span class="jsdoc-comment">// look for a next tab that will slide over to
 236         // replace the one being removed
 237         </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">){
 238             </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">];
 239             </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">()){
 240                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 241             }
 242         }
 243         </span><span class="jsdoc-comment">// if one isn't found select the previous tab (on the left)
 244         </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">;
 245         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">&gt;= 0){
 246             </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">];
 247             </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">()){
 248                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 249             }
 250         }
 251         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 252     },
 253
 254     </span><span class="jsdoc-comment">/**
 255      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
 256      * @param {String/Number} id The id or index of the TabPanelItem to disable.
 257      */
 258     </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">){
 259         </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">];
 260         </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">){
 261             </span><span class="jsdoc-var">tab.disable</span><span class="jsdoc-syntax">();
 262         }
 263     },
 264
 265     </span><span class="jsdoc-comment">/**
 266      * Enables a {@link Roo.TabPanelItem} that is disabled.
 267      * @param {String/Number} id The id or index of the TabPanelItem to enable.
 268      */
 269     </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">){
 270         </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">];
 271         </span><span class="jsdoc-var">tab.enable</span><span class="jsdoc-syntax">();
 272     },
 273
 274     </span><span class="jsdoc-comment">/**
 275      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
 276      * @param {String/Number} id The id or index of the TabPanelItem to activate.
 277      * @return {Roo.TabPanelItem} The TabPanelItem.
 278      */
 279     </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">){
 280         </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">];
 281         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">){
 282             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 283         }
 284         </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">){
 285             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
 286         }
 287         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
 288         </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">);
 289         </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">){
 290             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">){
 291                 </span><span class="jsdoc-var">this.active.hide</span><span class="jsdoc-syntax">();
 292             }
 293             </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">];
 294             </span><span class="jsdoc-var">this.active.show</span><span class="jsdoc-syntax">();
 295             </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">);
 296         }
 297         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
 298     },
 299
 300     </span><span class="jsdoc-comment">/**
 301      * Gets the active {@link Roo.TabPanelItem}.
 302      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
 303      */
 304     </span><span class="jsdoc-var">getActiveTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 305         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
 306     },
 307
 308     </span><span class="jsdoc-comment">/**
 309      * Updates the tab body element to fit the height of the container element
 310      * for overflow scrolling
 311      * @param {Number} targetHeight (optional) Override the starting height from the elements height
 312      */
 313     </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">){
 314         </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">);
 315         </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">();
 316         </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">);
 317         </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">);
 318         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">;
 319     },
 320
 321     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 322         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorResize</span><span class="jsdoc-syntax">){
 323             </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 324         }
 325     },
 326
 327     </span><span class="jsdoc-comment">/**
 328      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
 329      */
 330     </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 331         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 332     },
 333
 334     </span><span class="jsdoc-comment">/**
 335      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
 336      */
 337     </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 338         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 339         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
 340     },
 341
 342     </span><span class="jsdoc-comment">/**
 343      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
 344      */
 345     </span><span class="jsdoc-var">autoSizeTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 346         </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">;
 347         </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">;
 348         </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">;
 349         </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);
 350         </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">);
 351         </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">;
 352         </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">){
 353             </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">;
 354             </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);
 355             </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">){
 356                 </span><span class="jsdoc-comment">/*if(!this.sleft){    // incomplete scrolling code
 357                     this.createScrollButtons();
 358                 }
 359                 this.showScroll();
 360                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
 361             </span><span class="jsdoc-syntax">}
 362         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 363             </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">){
 364                 </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);
 365             }
 366         }
 367     },
 368
 369     </span><span class="jsdoc-comment">/**
 370      * Returns the number of tabs in this TabPanel.
 371      * @return {Number}
 372      */
 373      </span><span class="jsdoc-var">getCount </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 374          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">;
 375      },
 376
 377     </span><span class="jsdoc-comment">/**
 378      * Resizes all the tabs to the passed width
 379      * @param {Number} The new width
 380      */
 381     </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">){
 382         </span><span class="jsdoc-var">this.currentTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
 383         </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">++) {
 384                 </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">);
 385         }
 386     },
 387
 388     </span><span class="jsdoc-comment">/**
 389      * Destroys this TabPanel
 390      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
 391      */
 392     </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">){
 393         </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">);
 394         </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">++){
 395             </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">();
 396         }
 397         </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">){
 398             </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">);
 399             </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 400         }
 401     }
 402 });
 403
 404 </span><span class="jsdoc-comment">/**
 405  * @class Roo.TabPanelItem
 406  * @extends Roo.util.Observable
 407  * Represents an individual item (tab plus body) in a TabPanel.
 408  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
 409  * @param {String} id The id of this TabPanelItem
 410  * @param {String} text The text for the tab of this TabPanelItem
 411  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
 412  */
 413 </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">){
 414     </span><span class="jsdoc-comment">/**
 415      * The {@link Roo.TabPanel} this TabPanelItem belongs to
 416      * @type Roo.TabPanel
 417      */
 418     </span><span class="jsdoc-var">this.tabPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tabPanel</span><span class="jsdoc-syntax">;
 419     </span><span class="jsdoc-comment">/**
 420      * The id for this TabPanelItem
 421      * @type String
 422      */
 423     </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
 424     </span><span class="jsdoc-comment">/** @private */
 425     </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 426     </span><span class="jsdoc-comment">/** @private */
 427     </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 428     </span><span class="jsdoc-comment">/** @private */
 429     </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 430     </span><span class="jsdoc-var">this.closable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">;
 431
 432     </span><span class="jsdoc-comment">/**
 433      * The body element for this TabPanelItem.
 434      * @type Roo.Element
 435      */
 436     </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">));
 437     </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">);
 438     </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">);
 439     </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">);
 440     </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
 441
 442     </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">);
 443     </span><span class="jsdoc-comment">/** @private */
 444     </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">);
 445     </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">);
 446     </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">);
 447     </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">);
 448     </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">);
 449     </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">);
 450     </span><span class="jsdoc-comment">/** @private */
 451     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 452         </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">);
 453         </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">;
 454         </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">);
 455         </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">);
 456      }
 457
 458     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
 459          </span><span class="jsdoc-comment">/**
 460          * @event activate
 461          * Fires when this tab becomes the active tab.
 462          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 463          * @param {Roo.TabPanelItem} this
 464          */
 465         </span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 466         </span><span class="jsdoc-comment">/**
 467          * @event beforeclose
 468          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
 469          * @param {Roo.TabPanelItem} this
 470          * @param {Object} e Set cancel to true on this object to cancel the close.
 471          */
 472         </span><span class="jsdoc-string">&quot;beforeclose&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 473         </span><span class="jsdoc-comment">/**
 474          * @event close
 475          * Fires when this tab is closed.
 476          * @param {Roo.TabPanelItem} this
 477          */
 478          </span><span class="jsdoc-string">&quot;close&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 479         </span><span class="jsdoc-comment">/**
 480          * @event deactivate
 481          * Fires when this tab is no longer the active tab.
 482          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 483          * @param {Roo.TabPanelItem} this
 484          */
 485          </span><span class="jsdoc-string">&quot;deactivate&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 486     </span><span class="jsdoc-syntax">});
 487     </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 488
 489     </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">);
 490 };
 491
 492 </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">, {
 493     </span><span class="jsdoc-var">purgeListeners </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 494        </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">);
 495        </span><span class="jsdoc-var">this.el.removeAllListeners</span><span class="jsdoc-syntax">();
 496     },
 497     </span><span class="jsdoc-comment">/**
 498      * Shows this TabPanelItem -- this &lt;b&gt;does not&lt;/b&gt; deactivate the currently active TabPanelItem.
 499      */
 500     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 501         </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">);
 502         </span><span class="jsdoc-var">this.showAction</span><span class="jsdoc-syntax">();
 503         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isOpera</span><span class="jsdoc-syntax">){
 504             </span><span class="jsdoc-var">this.tabPanel.stripWrap.repaint</span><span class="jsdoc-syntax">();
 505         }
 506         </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">);
 507     },
 508
 509     </span><span class="jsdoc-comment">/**
 510      * Returns true if this tab is the active tab.
 511      * @return {Boolean}
 512      */
 513     </span><span class="jsdoc-var">isActive </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 514         </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">;
 515     },
 516
 517     </span><span class="jsdoc-comment">/**
 518      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
 519      */
 520     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 521         </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">);
 522         </span><span class="jsdoc-var">this.hideAction</span><span class="jsdoc-syntax">();
 523         </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">);
 524     },
 525
 526     </span><span class="jsdoc-var">hideAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 527         </span><span class="jsdoc-var">this.bodyEl.hide</span><span class="jsdoc-syntax">();
 528         </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">);
 529         </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">);
 530         </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">);
 531     },
 532
 533     </span><span class="jsdoc-var">showAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 534         </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">);
 535         </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">);
 536         </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">);
 537         </span><span class="jsdoc-var">this.bodyEl.show</span><span class="jsdoc-syntax">();
 538     },
 539
 540     </span><span class="jsdoc-comment">/**
 541      * Set the tooltip for the tab.
 542      * @param {String} tooltip The tab's tooltip
 543      */
 544     </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">){
 545         </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">()){
 546             </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">;
 547             </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">);
 548         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 549             </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">;
 550         }
 551     },
 552
 553     </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">){
 554         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 555         </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">);
 556     },
 557
 558     </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">){
 559         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 560         </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">);
 561     },
 562
 563     </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 564         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.inner.getWidth</span><span class="jsdoc-syntax">();
 565     },
 566
 567     </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">){
 568         </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">);
 569         </span><span class="jsdoc-var">this.inner.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iwidth</span><span class="jsdoc-syntax">);
 570         </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">));
 571         </span><span class="jsdoc-var">this.pnode.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 572     },
 573
 574     </span><span class="jsdoc-comment">/**
 575      * Show or hide the tab
 576      * @param {Boolean} hidden True to hide or false to show.
 577      */
 578     </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">){
 579         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">;
 580         </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">);
 581     },
 582
 583     </span><span class="jsdoc-comment">/**
 584      * Returns true if this tab is &quot;hidden&quot;
 585      * @return {Boolean}
 586      */
 587     </span><span class="jsdoc-var">isHidden </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 588         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">;
 589     },
 590
 591     </span><span class="jsdoc-comment">/**
 592      * Returns the text for this tab
 593      * @return {String}
 594      */
 595     </span><span class="jsdoc-var">getText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 596         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">;
 597     },
 598
 599     </span><span class="jsdoc-var">autoSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 600         </span><span class="jsdoc-comment">//this.el.beginMeasure();
 601         </span><span class="jsdoc-var">this.textEl.setWidth</span><span class="jsdoc-syntax">(1);
 602         </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">));
 603         </span><span class="jsdoc-comment">//this.el.endMeasure();
 604     </span><span class="jsdoc-syntax">},
 605
 606     </span><span class="jsdoc-comment">/**
 607      * Sets the text for the tab (Note: this also sets the tooltip text)
 608      * @param {String} text The tab's text and tooltip
 609      */
 610     </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">){
 611         </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 612         </span><span class="jsdoc-var">this.textEl.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
 613         </span><span class="jsdoc-var">this.setTooltip</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
 614         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabPanel.resizeTabs</span><span class="jsdoc-syntax">){
 615             </span><span class="jsdoc-var">this.autoSize</span><span class="jsdoc-syntax">();
 616         }
 617     },
 618     </span><span class="jsdoc-comment">/**
 619      * Activates this TabPanelItem -- this &lt;b&gt;does&lt;/b&gt; deactivate the currently active TabPanelItem.
 620      */
 621     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 622         </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">);
 623     },
 624
 625     </span><span class="jsdoc-comment">/**
 626      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
 627      */
 628     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 629         </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">){
 630             </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 631             </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">);
 632         }
 633     },
 634
 635     </span><span class="jsdoc-comment">/**
 636      * Enables this TabPanelItem if it was previously disabled.
 637      */
 638     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 639         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 640         </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">);
 641     },
 642
 643     </span><span class="jsdoc-comment">/**
 644      * Sets the content for this TabPanelItem.
 645      * @param {String} content The content
 646      * @param {Boolean} loadScripts true to look for and load scripts
 647      */
 648     </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">){
 649         </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">);
 650     },
 651
 652     </span><span class="jsdoc-comment">/**
 653      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
 654      * @return {Roo.UpdateManager} The UpdateManager
 655      */
 656     </span><span class="jsdoc-var">getUpdateManager </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 657         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.bodyEl.getUpdateManager</span><span class="jsdoc-syntax">();
 658     },
 659
 660     </span><span class="jsdoc-comment">/**
 661      * Set a URL to be used to load the content for this TabPanelItem.
 662      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
 663      * @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)
 664      * @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)
 665      * @return {Roo.UpdateManager} The UpdateManager
 666      */
 667     </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">){
 668         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
 669             </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">);
 670         }
 671         </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">]);
 672         </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">);
 673         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.bodyEl.getUpdateManager</span><span class="jsdoc-syntax">();
 674     },
 675
 676     </span><span class="jsdoc-comment">/** @private */
 677     </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">){
 678         </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">){
 679             </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">();
 680             </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">));
 681         }
 682     },
 683
 684     </span><span class="jsdoc-comment">/**
 685      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
 686      *   Will fail silently if the setUrl method has not been called.
 687      *   This does not activate the panel, just updates its content.
 688      */
 689     </span><span class="jsdoc-var">refresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 690         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">){
 691            </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 692            </span><span class="jsdoc-var">this.refreshDelegate</span><span class="jsdoc-syntax">();
 693         }
 694     },
 695
 696     </span><span class="jsdoc-comment">/** @private */
 697     </span><span class="jsdoc-var">_setLoaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 698         </span><span class="jsdoc-var">this.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 699     },
 700
 701     </span><span class="jsdoc-comment">/** @private */
 702     </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">){
 703         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= {};
 704         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 705         </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">);
 706         </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">){
 707             </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">);
 708         }
 709     },
 710     </span><span class="jsdoc-comment">/**
 711      * The text displayed in the tooltip for the close icon.
 712      * @type String
 713      */
 714     </span><span class="jsdoc-var">closeText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Close this tab&quot;
 715 </span><span class="jsdoc-syntax">});
 716
 717 </span><span class="jsdoc-comment">/** @private */
 718 </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">){
 719     </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">);
 720     </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">;
 721     </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">);
 722     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">;
 723 };
 724 </span><span class="jsdoc-comment">/** @private */
 725 </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">){
 726     </span><span class="jsdoc-comment">// div wrapper for retard IE
 727     </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">;
 728     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip.firstChild.firstChild.firstChild.firstChild</span><span class="jsdoc-syntax">;
 729 };
 730 </span><span class="jsdoc-comment">/** @private */
 731 </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">){
 732     </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">);
 733     </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">);
 734     </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">);
 735     </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
 736     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 737 };
 738 </span><span class="jsdoc-comment">/** @private */
 739 </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">){
 740     </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">);
 741     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">){
 742         </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">);
 743         </span><span class="jsdoc-var">body.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
 744     }
 745     </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">);
 746     </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">);
 747     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 748 };
 749 </span><span class="jsdoc-comment">/** @private */
 750 </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">){
 751     </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">);
 752     </span><span class="jsdoc-var">stripEl.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 753     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">closable</span><span class="jsdoc-syntax">){
 754         </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">;
 755         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.closeTpl</span><span class="jsdoc-syntax">){
 756             </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">(
 757                </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">+
 758                </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">+
 759                </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;'
 760             </span><span class="jsdoc-syntax">);
 761         }
 762         </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">});
 763         </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];
 764         </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];
 765         </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">};
 766     } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 767         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabTpl</span><span class="jsdoc-syntax">){
 768             </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">(
 769                </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">+
 770                </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;'
 771             </span><span class="jsdoc-syntax">);
 772         }
 773         </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">});
 774         </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];
 775         </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">};
 776     }
 777 };</span></code></body></html>