projects / roojs1 / blob
? search:


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