projects / roojs1 / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
docs/default.css
[roojs1] / docs / symbols / src / Roo_bootstrap_panel_Tabs.js.html
1 <html><head><title>../roojs1/Roo/bootstrap/panel/Tabs.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.bootstrap.panel.Tabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
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">config.el</span><span class="jsdoc-syntax">);
55     </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.el</span><span class="jsdoc-syntax">;
56     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
57         </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">){
58             </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">;
59         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
60             </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">);
61         }
62     }
63     
64     </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">){
65         </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">));
66         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;roo-tabs-bottom&quot;</span><span class="jsdoc-syntax">);
67     }
68     </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">);
69     </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">);
70     </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">);
71     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
72         </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">);
73     }
74     </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">){
75         </span><span class="jsdoc-comment">/** The body element that contains {@link Roo.TabPanelItem} bodies. +
76          * @type Roo.Element
77          */
78         </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">));
79         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;roo-tabs-top&quot;</span><span class="jsdoc-syntax">);
80     }
81     </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= [];
82
83     </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">);
84
85     </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
86     </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">);
87
88     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
89         </span><span class="jsdoc-comment">/**
90          * @event tabchange
91          * Fires when the active tab changes
92          * @param {Roo.TabPanel} this
93          * @param {Roo.TabPanelItem} activePanel The new active tab
94          */
95         </span><span class="jsdoc-string">&quot;tabchange&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
96         </span><span class="jsdoc-comment">/**
97          * @event beforetabchange
98          * Fires before the active tab changes, set cancel to true on the &quot;e&quot; parameter to cancel the change
99          * @param {Roo.TabPanel} this
100          * @param {Object} e Set cancel to true on this object to cancel the tab change
101          * @param {Roo.TabPanelItem} tab The tab being changed to
102          */
103         </span><span class="jsdoc-string">&quot;beforetabchange&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
104     </span><span class="jsdoc-syntax">});
105
106     </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">);
107     </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">);
108     </span><span class="jsdoc-var">this.hiddenCount </span><span class="jsdoc-syntax">= 0;
109
110
111     </span><span class="jsdoc-comment">// toolbar on the tabbar support...
112     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">) {
113         </span><span class="jsdoc-var">alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;no toolbar support yet&quot;</span><span class="jsdoc-syntax">);
114         </span><span class="jsdoc-var">this.toolbar  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
115         </span><span class="jsdoc-comment">/*
116         var tcfg = this.toolbar;
117         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
118         this.toolbar = new Roo.Toolbar(tcfg);
119         if (Roo.isSafari) {
120             var tbl = tcfg.container.child('table', true);
121             tbl.setAttribute('width', '100%');
122         }
123         */
124         
125     </span><span class="jsdoc-syntax">}
126    
127
128
129     </span><span class="jsdoc-var">Roo.bootstrap.panel.Tabs.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
130 };
131
132 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.panel.Tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
133     </span><span class="jsdoc-comment">/*
134      *@cfg {String} tabPosition &quot;top&quot; or &quot;bottom&quot; (defaults to &quot;top&quot;)
135      */
136     </span><span class="jsdoc-var">tabPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">,
137     </span><span class="jsdoc-comment">/*
138      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
139      */
140     </span><span class="jsdoc-var">currentTabWidth </span><span class="jsdoc-syntax">: 0,
141     </span><span class="jsdoc-comment">/*
142      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
143      */
144     </span><span class="jsdoc-var">minTabWidth </span><span class="jsdoc-syntax">: 40,
145     </span><span class="jsdoc-comment">/*
146      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
147      */
148     </span><span class="jsdoc-var">maxTabWidth </span><span class="jsdoc-syntax">: 250,
149     </span><span class="jsdoc-comment">/*
150      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
151      */
152     </span><span class="jsdoc-var">preferredTabWidth </span><span class="jsdoc-syntax">: 175,
153     </span><span class="jsdoc-comment">/*
154      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
155      */
156     </span><span class="jsdoc-var">resizeTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
157     </span><span class="jsdoc-comment">/*
158      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
159      */
160     </span><span class="jsdoc-var">monitorResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
161     </span><span class="jsdoc-comment">/*
162      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
163      */
164     </span><span class="jsdoc-var">toolbar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
165
166     </span><span class="jsdoc-comment">/**
167      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
168      * @param {String} id The id of the div to use &lt;b&gt;or create&lt;/b&gt;
169      * @param {String} text The text for the tab
170      * @param {String} content (optional) Content to put in the TabPanelItem body
171      * @param {Boolean} closable (optional) True to create a close icon on the tab
172      * @return {Roo.TabPanelItem} The created TabPanelItem
173      */
174     </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">)
175     {
176         </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.bootstrap.panel.TabItem</span><span class="jsdoc-syntax">({
177             </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
178             </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
179             </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">,
180             </span><span class="jsdoc-var">closable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">closable
181         </span><span class="jsdoc-syntax">});
182         </span><span class="jsdoc-var">this.addTabItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
183         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">){
184             </span><span class="jsdoc-var">item.setContent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">content</span><span class="jsdoc-syntax">);
185         }
186         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
187     },
188
189     </span><span class="jsdoc-comment">/**
190      * Returns the {@link Roo.TabPanelItem} with the specified id/index
191      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
192      * @return {Roo.TabPanelItem}
193      */
194     </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">){
195         </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">];
196     },
197
198     </span><span class="jsdoc-comment">/**
199      * Hides the {@link Roo.TabPanelItem} with the specified id/index
200      * @param {String/Number} id The id or index of the TabPanelItem to hide.
201      */
202     </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">){
203         </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">];
204         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t.isHidden</span><span class="jsdoc-syntax">()){
205            </span><span class="jsdoc-var">t.setHidden</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
206            </span><span class="jsdoc-var">this.hiddenCount</span><span class="jsdoc-syntax">++;
207            </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
208         }
209     },
210
211     </span><span class="jsdoc-comment">/**
212      * &quot;Unhides&quot; the {@link Roo.TabPanelItem} with the specified id/index.
213      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
214      */
215     </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">){
216         </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">];
217         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.isHidden</span><span class="jsdoc-syntax">()){
218            </span><span class="jsdoc-var">t.setHidden</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
219            </span><span class="jsdoc-var">this.hiddenCount</span><span class="jsdoc-syntax">--;
220            </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
221         }
222     },
223
224     </span><span class="jsdoc-comment">/**
225      * Adds an existing {@link Roo.TabPanelItem}.
226      * @param {Roo.TabPanelItem} item The TabPanelItem to add
227      */
228     </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">){
229         </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">;
230         </span><span class="jsdoc-var">this.items.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
231       </span><span class="jsdoc-comment">//  if(this.resizeTabs){
232     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
233   //         this.autoSizeTabs();
234 //        }else{
235 //            item.autoSize();
236        // }
237     </span><span class="jsdoc-syntax">},
238
239     </span><span class="jsdoc-comment">/**
240      * Removes a {@link Roo.TabPanelItem}.
241      * @param {String/Number} id The id or index of the TabPanelItem to remove.
242      */
243     </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">){
244         </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">;
245         </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">];
246         </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">; }
247         </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">);
248         </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){
249             </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">);
250             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newTab</span><span class="jsdoc-syntax">) {
251                 </span><span class="jsdoc-var">newTab.activate</span><span class="jsdoc-syntax">();
252             }
253         }
254         </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">);
255         </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
256             </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">);
257         }
258         </span><span class="jsdoc-var">items.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, 1);
259         </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">];
260         </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">);
261         </span><span class="jsdoc-var">tab.purgeListeners</span><span class="jsdoc-syntax">();
262         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
263     },
264
265     </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">){
266         </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">;
267         </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">;
268         </span><span class="jsdoc-comment">// look for a next tab that will slide over to
269         // replace the one being removed
270         </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">){
271             </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">];
272             </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">()){
273                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
274             }
275         }
276         </span><span class="jsdoc-comment">// if one isn't found select the previous tab (on the left)
277         </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">;
278         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">&gt;= 0){
279             </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">];
280             </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">()){
281                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
282             }
283         }
284         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
285     },
286
287     </span><span class="jsdoc-comment">/**
288      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
289      * @param {String/Number} id The id or index of the TabPanelItem to disable.
290      */
291     </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">){
292         </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">];
293         </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">){
294             </span><span class="jsdoc-var">tab.disable</span><span class="jsdoc-syntax">();
295         }
296     },
297
298     </span><span class="jsdoc-comment">/**
299      * Enables a {@link Roo.TabPanelItem} that is disabled.
300      * @param {String/Number} id The id or index of the TabPanelItem to enable.
301      */
302     </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">){
303         </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">];
304         </span><span class="jsdoc-var">tab.enable</span><span class="jsdoc-syntax">();
305     },
306
307     </span><span class="jsdoc-comment">/**
308      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
309      * @param {String/Number} id The id or index of the TabPanelItem to activate.
310      * @return {Roo.TabPanelItem} The TabPanelItem.
311      */
312     </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">){
313         </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">];
314         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">){
315             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
316         }
317         </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">){
318             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
319         }
320         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">e </span><span class="jsdoc-syntax">= {};
321         </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">);
322         </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">){
323             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">){
324                 </span><span class="jsdoc-var">this.active.hide</span><span class="jsdoc-syntax">();
325             }
326             </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">];
327             </span><span class="jsdoc-var">this.active.show</span><span class="jsdoc-syntax">();
328             </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">);
329         }
330         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
331     },
332
333     </span><span class="jsdoc-comment">/**
334      * Gets the active {@link Roo.TabPanelItem}.
335      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
336      */
337     </span><span class="jsdoc-var">getActiveTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
338         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.active</span><span class="jsdoc-syntax">;
339     },
340
341     </span><span class="jsdoc-comment">/**
342      * Updates the tab body element to fit the height of the container element
343      * for overflow scrolling
344      * @param {Number} targetHeight (optional) Override the starting height from the elements height
345      */
346     </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">){
347         </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">);
348         </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">();
349         </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">);
350         </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">);
351         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">newHeight</span><span class="jsdoc-syntax">;
352     },
353
354     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
355         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorResize</span><span class="jsdoc-syntax">){
356             </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
357         }
358     },
359
360     </span><span class="jsdoc-comment">/**
361      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
362      */
363     </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
364         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
365     },
366
367     </span><span class="jsdoc-comment">/**
368      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
369      */
370     </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
371         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
372         </span><span class="jsdoc-var">this.autoSizeTabs</span><span class="jsdoc-syntax">();
373     },
374
375     </span><span class="jsdoc-comment">/**
376      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
377      */
378     </span><span class="jsdoc-var">autoSizeTabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
379         </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">;
380         </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">;
381         </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">) {
382             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
383         }
384         </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);
385         </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">);
386         </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">;
387         </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">){
388             </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">;
389             </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);
390             </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">){
391                 </span><span class="jsdoc-comment">/*if(!this.sleft){    // incomplete scrolling code
392                     this.createScrollButtons();
393                 }
394                 this.showScroll();
395                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
396             </span><span class="jsdoc-syntax">}
397         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
398             </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">){
399                 </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);
400             }
401         }
402     },
403
404     </span><span class="jsdoc-comment">/**
405      * Returns the number of tabs in this TabPanel.
406      * @return {Number}
407      */
408      </span><span class="jsdoc-var">getCount </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
409          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">;
410      },
411
412     </span><span class="jsdoc-comment">/**
413      * Resizes all the tabs to the passed width
414      * @param {Number} The new width
415      */
416     </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">){
417         </span><span class="jsdoc-var">this.currentTabWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">;
418         </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">++) {
419                 </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">()) {
420                 </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">);
421             }
422         }
423     },
424
425     </span><span class="jsdoc-comment">/**
426      * Destroys this TabPanel
427      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
428      */
429     </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">){
430         </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">);
431         </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">++){
432             </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">();
433         }
434         </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">){
435             </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">);
436             </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
437         }
438     },
439     
440     </span><span class="jsdoc-var">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">)
441     {
442         </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;nav&quot;</span><span class="jsdoc-syntax">);
443         </span><span class="jsdoc-var">strip.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;navbar navbar-default&quot;</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//&quot;x-tabs-wrap&quot;;
444         </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">);
445         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip</span><span class="jsdoc-syntax">;
446     },
447     
448     </span><span class="jsdoc-var">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">)
449     {
450         </span><span class="jsdoc-comment">// div wrapper for retard IE
451         // returns the &quot;tr&quot; element.
452         </span><span class="jsdoc-var">strip.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;ul class=&quot;nav nav-tabs&quot; role=&quot;tablist&quot;&gt;&lt;/ul&gt;'</span><span class="jsdoc-syntax">;
453         </span><span class="jsdoc-comment">//'&lt;div class=&quot;x-tabs-strip-wrap&quot;&gt;'+
454           //  '&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;'+
455           //  '&lt;td class=&quot;x-tab-strip-toolbar&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;';
456         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">strip.firstChild</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//.firstChild.firstChild.firstChild;
457     </span><span class="jsdoc-syntax">},
458     </span><span class="jsdoc-var">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">)
459     {
460         </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">);
461         </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">);
462         </span><span class="jsdoc-comment">//Roo.fly(body).addClass(&quot;x-tabs-body&quot;);
463         </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;tab-content&quot;</span><span class="jsdoc-syntax">);
464         </span><span class="jsdoc-var">container.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
465         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
466     },
467     </span><span class="jsdoc-var">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">){
468         </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">);
469         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">){
470             </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">);
471             </span><span class="jsdoc-var">body.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
472         }
473         </span><span class="jsdoc-comment">//Roo.fly(body).addClass(&quot;x-tabs-item-body&quot;);
474         </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;tab-pane&quot;</span><span class="jsdoc-syntax">);
475          </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">);
476         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
477     },
478     </span><span class="jsdoc-comment">/** @private */
479     </span><span class="jsdoc-var">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">)
480     {
481         </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;li&quot;</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// was td..
482         </span><span class="jsdoc-var">stripEl.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">stripEl.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">stripEl.childNodes.length</span><span class="jsdoc-syntax">-1]);
483         </span><span class="jsdoc-comment">//stripEl.appendChild(td);
484         /*if(closable){
485             td.className = &quot;x-tabs-closable&quot;;
486             if(!this.closeTpl){
487                 this.closeTpl = new Roo.Template(
488                    '&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;' +
489                    '&lt;span unselectable=&quot;on&quot;' + (this.disableTooltips ? '' : ' title=&quot;{text}&quot;') +' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;' +
490                    '&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;'
491                 );
492             }
493             var el = this.closeTpl.overwrite(td, {&quot;text&quot;: text});
494             var close = el.getElementsByTagName(&quot;div&quot;)[0];
495             var inner = el.getElementsByTagName(&quot;em&quot;)[0];
496             return {&quot;el&quot;: el, &quot;close&quot;: close, &quot;inner&quot;: inner};
497         } else {
498         */
499         // not sure what this is..
500             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tabTpl</span><span class="jsdoc-syntax">){
501                 </span><span class="jsdoc-comment">//this.tabTpl = new Roo.Template(
502                 //   '&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;' +
503                 //   '&lt;span unselectable=&quot;on&quot;' + (this.disableTooltips ? '' : ' title=&quot;{text}&quot;') +' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;'
504                 //);
505                 </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">(
506                    </span><span class="jsdoc-string">'&lt;a href=&quot;#&quot;&gt;' </span><span class="jsdoc-syntax">+
507                    </span><span class="jsdoc-string">'&lt;span unselectable=&quot;on&quot;' </span><span class="jsdoc-syntax">+
508                             (</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">) +
509                             </span><span class="jsdoc-string">' &gt;{text}&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;'
510                 </span><span class="jsdoc-syntax">);
511                 
512             }
513             </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">});
514             </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;span&quot;</span><span class="jsdoc-syntax">)[0];
515             </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">};
516         </span><span class="jsdoc-comment">//}
517     </span><span class="jsdoc-syntax">}
518         
519     
520 });
521 </span></code></body></html>
RooJS - Version 1