Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / TabPanel.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js"><div id="cls-Ext.TabPanel"></div>/**
9  * @class Ext.TabPanel
10  * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
11  * for layout purposes, but also have special support for containing child Components
12  * (<tt>{@link Ext.Container#items items}</tt>) that are managed using a
13  * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p>
14  *
15  * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component
16  * and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
17  * re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>.
18  *
19  * <p><b><u>TabPanel header/footer elements</u></b></p>
20  * <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
21  * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
22  * This means that a TabPanel will not display any configured title, and will not display any
23  * configured header {@link Ext.Panel#tools tools}.</p>
24  * <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
25  * <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p>
26  *
27  * <p><b><u>Tab Events</u></b></p>
28  * <p>There is no actual tab class &mdash; each tab is simply a {@link Ext.BoxComponent Component}
29  * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
30  * can fire additional events that only exist for tabs and are not available from other Components.
31  * These events are:</p>
32  * <div><ul class="mdetail-params">
33  * <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes
34  * the active tab.</li>
35  * <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that
36  * was the active tab becomes deactivated.</li>
37  * </ul></div>
38  * <p><b><u>Creating TabPanels from Code</u></b></p>
39  * <p>TabPanels can be created and rendered completely in code, as in this example:</p>
40  * <pre><code>
41 var tabs = new Ext.TabPanel({
42     renderTo: Ext.getBody(),
43     activeTab: 0,
44     items: [{
45         title: 'Tab 1',
46         html: 'A simple tab'
47     },{
48         title: 'Tab 2',
49         html: 'Another one'
50     }]
51 });
52 </code></pre>
53  * <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
54  * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
55  * <div><ul class="mdetail-params">
56  *
57  * <li>Pre-Structured Markup</li>
58  * <div class="sub-desc">
59  * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
60  * from existing markup (See the {@link #autoTabs} example).</p>
61  * </div>
62  *
63  * <li>Un-Structured Markup</li>
64  * <div class="sub-desc">
65  * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
66  * which elements should be the container and the tabs. Using this method tab content can be pulled from different
67  * elements within the page by id regardless of page structure. For example:</p>
68  * <pre><code>
69 var tabs = new Ext.TabPanel({
70     renderTo: 'my-tabs',
71     activeTab: 0,
72     items:[
73         {contentEl:'tab1', title:'Tab 1'},
74         {contentEl:'tab2', title:'Tab 2'}
75     ]
76 });
77
78 // Note that the tabs do not have to be nested within the container (although they can be)
79 &lt;div id="my-tabs">&lt;/div>
80 &lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
81 &lt;div id="tab2" class="x-hide-display">Another one&lt;/div>
82 </code></pre>
83  * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
84  * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
85  * to render all content tabs on page load.
86  * </div>
87  *
88  * </ul></div>
89  *
90  * @extends Ext.Panel
91  * @constructor
92  * @param {Object} config The configuration options
93  * @xtype tabpanel
94  */
95 Ext.TabPanel = Ext.extend(Ext.Panel,  {
96     <div id="cfg-Ext.TabPanel-layoutOnTabChange"></div>/**
97      * @cfg {Boolean} layoutOnTabChange
98      * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
99      * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
100      */
101     <div id="cfg-Ext.TabPanel-tabCls"></div>/**
102      * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
103      * class name applied to the tab strip item representing the child Component, allowing special
104      * styling to be applied.
105      */
106     <div id="cfg-Ext.TabPanel-monitorResize"></div>/**
107      * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
108      * browser resize (defaults to true).
109      */
110     monitorResize : true,
111     <div id="cfg-Ext.TabPanel-deferredRender"></div>/**
112      * @cfg {Boolean} deferredRender
113      * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
114      * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
115      * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
116      * is rendered. If there is a significant amount of content or a lot of heavy controls being
117      * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
118      * improve performance.</p>
119      * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
120      * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
121      * configuration value.</p>
122      * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
123      * within an unactivated tab will not be available. For example, this means that if the TabPanel
124      * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
125      * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
126      * available to either {@link Ext.form.BasicForm#getValues getValues} or
127      * {@link Ext.form.BasicForm#setValues setValues}.</p>
128      */
129     deferredRender : true,
130     <div id="cfg-Ext.TabPanel-tabWidth"></div>/**
131      * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
132      */
133     tabWidth : 120,
134     <div id="cfg-Ext.TabPanel-minTabWidth"></div>/**
135      * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
136      */
137     minTabWidth : 30,
138     <div id="cfg-Ext.TabPanel-resizeTabs"></div>/**
139      * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
140      * tab strip (defaults to false).  Setting this to true may cause specific widths that might be set per tab to
141      * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
142      */
143     resizeTabs : false,
144     <div id="cfg-Ext.TabPanel-enableTabScroll"></div>/**
145      * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
146      * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
147      */
148     enableTabScroll : false,
149     <div id="cfg-Ext.TabPanel-scrollIncrement"></div>/**
150      * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
151      * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width).  Only
152      * applies when <tt>{@link #enableTabScroll} = true</tt>.
153      */
154     scrollIncrement : 0,
155     <div id="cfg-Ext.TabPanel-scrollRepeatInterval"></div>/**
156      * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
157      * continuously pressed (defaults to <tt>400</tt>).
158      */
159     scrollRepeatInterval : 400,
160     <div id="cfg-Ext.TabPanel-scrollDuration"></div>/**
161      * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
162      * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
163      */
164     scrollDuration : 0.35,
165     <div id="cfg-Ext.TabPanel-animScroll"></div>/**
166      * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
167      * to <tt>true</tt>).  Only applies when <tt>{@link #enableTabScroll} = true</tt>.
168      */
169     animScroll : true,
170     <div id="cfg-Ext.TabPanel-tabPosition"></div>/**
171      * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
172      * The only other supported value is <tt>'bottom'</tt>.  <b>Note</b>: tab scrolling is only supported for
173      * <tt>tabPosition: 'top'</tt>.
174      */
175     tabPosition : 'top',
176     <div id="cfg-Ext.TabPanel-baseCls"></div>/**
177      * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
178      */
179     baseCls : 'x-tab-panel',
180     <div id="cfg-Ext.TabPanel-autoTabs"></div>/**
181      * @cfg {Boolean} autoTabs
182      * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
183      * to tabs and added to this panel (defaults to <tt>false</tt>).  Note that the query will be executed within
184      * the scope of the container element only (so that multiple tab panels from markup can be supported via this
185      * method).</p>
186      * <p>This method is only possible when the markup is structured correctly as a container with nested divs
187      * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
188      * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
189      * <p>There are a couple of things to note when using this method:<ul>
190      * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
191      * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
192      * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
193      * components.</li>
194      * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
195      * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
196      * until each tab is activated and will be visible outside the TabPanel.</li>
197      * </ul>Example usage:</p>
198      * <pre><code>
199 var tabs = new Ext.TabPanel({
200     applyTo: 'my-tabs',
201     activeTab: 0,
202     deferredRender: false,
203     autoTabs: true
204 });
205
206 // This markup will be converted to a TabPanel from the code above
207 &lt;div id="my-tabs">
208     &lt;div class="x-tab" title="Tab 1">A simple tab&lt;/div>
209     &lt;div class="x-tab" title="Tab 2">Another one&lt;/div>
210 &lt;/div>
211 </code></pre>
212      */
213     autoTabs : false,
214     <div id="cfg-Ext.TabPanel-autoTabSelector"></div>/**
215      * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
216      * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>).  This can be any valid selector
217      * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
218      * tab panel only (so that multiple tab panels from markup can be supported on a page).
219      */
220     autoTabSelector : 'div.x-tab',
221     <div id="cfg-Ext.TabPanel-activeTab"></div>/**
222      * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
223      * activated on render (defaults to none).
224      */
225     activeTab : null,
226     <div id="cfg-Ext.TabPanel-tabMargin"></div>/**
227      * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
228      * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
229      * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
230      */
231     tabMargin : 2,
232     <div id="cfg-Ext.TabPanel-plain"></div>/**
233      * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
234      * (defaults to <tt>false</tt>).
235      */
236     plain : false,
237     <div id="cfg-Ext.TabPanel-wheelIncrement"></div>/**
238      * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
239      * scrolling (defaults to <tt>20</tt>).
240      */
241     wheelIncrement : 20,
242
243     /*
244      * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
245      * It does not generally need to be changed, but can be if external code also uses an id scheme that can
246      * potentially clash with this one.
247      */
248     idDelimiter : '__',
249
250     // private
251     itemCls : 'x-tab-item',
252
253     // private config overrides
254     elements : 'body',
255     headerAsText : false,
256     frame : false,
257     hideBorders :true,
258
259     // private
260     initComponent : function(){
261         this.frame = false;
262         Ext.TabPanel.superclass.initComponent.call(this);
263         this.addEvents(
264             <div id="event-Ext.TabPanel-beforetabchange"></div>/**
265              * @event beforetabchange
266              * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
267              * @param {TabPanel} this
268              * @param {Panel} newTab The tab being activated
269              * @param {Panel} currentTab The current active tab
270              */
271             'beforetabchange',
272             <div id="event-Ext.TabPanel-tabchange"></div>/**
273              * @event tabchange
274              * Fires after the active tab has changed.
275              * @param {TabPanel} this
276              * @param {Panel} tab The new active tab
277              */
278             'tabchange',
279             <div id="event-Ext.TabPanel-contextmenu"></div>/**
280              * @event contextmenu
281              * Relays the contextmenu event from a tab selector element in the tab strip.
282              * @param {TabPanel} this
283              * @param {Panel} tab The target tab
284              * @param {EventObject} e
285              */
286             'contextmenu'
287         );
288         <div id="cfg-Ext.TabPanel-layoutConfig"></div>/**
289          * @cfg {Object} layoutConfig
290          * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
291          * <code>layoutConfig</code> may be used to configure this layout manager.
292          * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
293          * configured on the TabPanel will be applied as configs to the layout manager.
294          */
295         this.setLayout(new Ext.layout.CardLayout(Ext.apply({
296             layoutOnCardChange: this.layoutOnTabChange,
297             deferredRender: this.deferredRender
298         }, this.layoutConfig)));
299
300         if(this.tabPosition == 'top'){
301             this.elements += ',header';
302             this.stripTarget = 'header';
303         }else {
304             this.elements += ',footer';
305             this.stripTarget = 'footer';
306         }
307         if(!this.stack){
308             this.stack = Ext.TabPanel.AccessStack();
309         }
310         this.initItems();
311     },
312
313     // private
314     onRender : function(ct, position){
315         Ext.TabPanel.superclass.onRender.call(this, ct, position);
316
317         if(this.plain){
318             var pos = this.tabPosition == 'top' ? 'header' : 'footer';
319             this[pos].addClass('x-tab-panel-'+pos+'-plain');
320         }
321
322         var st = this[this.stripTarget];
323
324         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
325             tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
326
327         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
328         this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
329         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
330
331         this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
332         this.strip.createChild({cls:'x-clear'});
333
334         this.body.addClass('x-tab-panel-body-'+this.tabPosition);
335
336         <div id="cfg-Ext.TabPanel-itemTpl"></div>/**
337          * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
338          * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
339          * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
340          * <p>The main element created should be a <tt>&lt;li></tt> element. In order for a click event on
341          * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
342          * native <tt>{@link #getTemplateArgs}</tt>.</p>
343          * <p>The child element which contains the title text must be marked by the CSS class
344          * <tt>x-tab-strip-inner</tt>.</p>
345          * <p>To enable closability, the created element should contain an element marked by the CSS class
346          * <tt>x-tab-strip-close</tt>.</p>
347          * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
348          * style rules to create the desired appearance.</p>
349          * Below is an example of how to create customized tab selector items:<pre><code>
350 new Ext.TabPanel({
351     renderTo: document.body,
352     minTabWidth: 115,
353     tabWidth: 135,
354     enableTabScroll: true,
355     width: 600,
356     height: 250,
357     defaults: {autoScroll:true},
358     itemTpl: new Ext.XTemplate(
359     '&lt;li class="{cls}" id="{id}" style="overflow:hidden">',
360          '&lt;tpl if="closable">',
361             '&lt;a class="x-tab-strip-close" onclick="return false;">&lt;/a>',
362          '&lt;/tpl>',
363          '&lt;a class="x-tab-right" href="#" onclick="return false;" style="padding-left:6px">',
364             '&lt;em class="x-tab-left">',
365                 '&lt;span class="x-tab-strip-inner">',
366                     '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0">',
367                     '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}&lt;/span>',
368                 '&lt;/span>',
369             '&lt;/em>',
370         '&lt;/a>',
371     '&lt;/li>'
372     ),
373     getTemplateArgs: function(item) {
374 //      Call the native method to collect the base data. Like the ID!
375         var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
376
377 //      Add stuff used in our template
378         return Ext.apply(result, {
379             closable: item.closable,
380             src: item.iconSrc,
381             extra: item.extraText || ''
382         });
383     },
384     items: [{
385         title: 'New Tab 1',
386         iconSrc: '../shared/icons/fam/grid.png',
387         html: 'Tab Body 1',
388         closable: true
389     }, {
390         title: 'New Tab 2',
391         iconSrc: '../shared/icons/fam/grid.png',
392         html: 'Tab Body 2',
393         extraText: 'Extra stuff in the tab button'
394     }]
395 });
396 </code></pre>
397          */
398         if(!this.itemTpl){
399             var tt = new Ext.Template(
400                  '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
401                  '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
402                  '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
403                  '</em></a></li>'
404             );
405             tt.disableFormats = true;
406             tt.compile();
407             Ext.TabPanel.prototype.itemTpl = tt;
408         }
409
410         this.items.each(this.initTab, this);
411     },
412
413     // private
414     afterRender : function(){
415         Ext.TabPanel.superclass.afterRender.call(this);
416         if(this.autoTabs){
417             this.readTabs(false);
418         }
419         if(this.activeTab !== undefined){
420             var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
421             delete this.activeTab;
422             this.setActiveTab(item);
423         }
424     },
425
426     // private
427     initEvents : function(){
428         Ext.TabPanel.superclass.initEvents.call(this);
429         this.on('add', this.onAdd, this, {target: this});
430         this.on('remove', this.onRemove, this, {target: this});
431
432         this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
433         this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
434         if(this.enableTabScroll){
435             this.mon(this.strip, 'mousewheel', this.onWheel, this);
436         }
437     },
438
439     // private
440     findTargets : function(e){
441         var item = null;
442         var itemEl = e.getTarget('li', this.strip);
443         if(itemEl){
444             item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
445             if(item.disabled){
446                 return {
447                     close : null,
448                     item : null,
449                     el : null
450                 };
451             }
452         }
453         return {
454             close : e.getTarget('.x-tab-strip-close', this.strip),
455             item : item,
456             el : itemEl
457         };
458     },
459
460     // private
461     onStripMouseDown : function(e){
462         if(e.button !== 0){
463             return;
464         }
465         e.preventDefault();
466         var t = this.findTargets(e);
467         if(t.close){
468             if (t.item.fireEvent('beforeclose', t.item) !== false) {
469                 t.item.fireEvent('close', t.item);
470                 this.remove(t.item);
471             }
472             return;
473         }
474         if(t.item && t.item != this.activeTab){
475             this.setActiveTab(t.item);
476         }
477     },
478
479     // private
480     onStripContextMenu : function(e){
481         e.preventDefault();
482         var t = this.findTargets(e);
483         if(t.item){
484             this.fireEvent('contextmenu', this, t.item, e);
485         }
486     },
487
488     <div id="method-Ext.TabPanel-readTabs"></div>/**
489      * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
490      * <tt>{@link #autoTabSelector}</tt>
491      * @param {Boolean} removeExisting True to remove existing tabs
492      */
493     readTabs : function(removeExisting){
494         if(removeExisting === true){
495             this.items.each(function(item){
496                 this.remove(item);
497             }, this);
498         }
499         var tabs = this.el.query(this.autoTabSelector);
500         for(var i = 0, len = tabs.length; i < len; i++){
501             var tab = tabs[i];
502             var title = tab.getAttribute('title');
503             tab.removeAttribute('title');
504             this.add({
505                 title: title,
506                 contentEl: tab
507             });
508         }
509     },
510
511     // private
512     initTab : function(item, index){
513         var before = this.strip.dom.childNodes[index];
514         var p = this.getTemplateArgs(item);
515         var el = before ?
516                  this.itemTpl.insertBefore(before, p) :
517                  this.itemTpl.append(this.strip, p);
518
519         Ext.fly(el).addClassOnOver('x-tab-strip-over');
520
521         if(item.tabTip){
522             Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
523         }
524         item.tabEl = el;
525
526         item.on('disable', this.onItemDisabled, this);
527         item.on('enable', this.onItemEnabled, this);
528         item.on('titlechange', this.onItemTitleChanged, this);
529         item.on('iconchange', this.onItemIconChanged, this);
530         item.on('beforeshow', this.onBeforeShowItem, this);
531     },
532
533     <div id="method-Ext.TabPanel-getTemplateArgs"></div>/**
534      * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
535      * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
536      * to create a formatted, clickable tab selector element. The properties which must be returned
537      * are:</p><div class="mdetail-params"><ul>
538      * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
539      * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
540      * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
541      * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
542      * </ul></div>
543      * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
544      * @return {Object} An object hash containing the properties required to render the selector element.
545      */
546     getTemplateArgs : function(item) {
547         var cls = item.closable ? 'x-tab-strip-closable' : '';
548         if(item.disabled){
549             cls += ' x-item-disabled';
550         }
551         if(item.iconCls){
552             cls += ' x-tab-with-icon';
553         }
554         if(item.tabCls){
555             cls += ' ' + item.tabCls;
556         }
557
558         return {
559             id: this.id + this.idDelimiter + item.getItemId(),
560             text: item.title,
561             cls: cls,
562             iconCls: item.iconCls || ''
563         };
564     },
565
566     // private
567     onAdd : function(tp, item, index){
568         this.initTab(item, index);
569         if(this.items.getCount() == 1){
570             this.syncSize();
571         }
572         this.delegateUpdates();
573     },
574
575     // private
576     onBeforeAdd : function(item){
577         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
578         if(existing){
579             this.setActiveTab(item);
580             return false;
581         }
582         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
583         var es = item.elements;
584         item.elements = es ? es.replace(',header', '') : es;
585         item.border = (item.border === true);
586     },
587
588     // private
589     onRemove : function(tp, item){
590         Ext.destroy(Ext.get(this.getTabEl(item)));
591         this.stack.remove(item);
592         item.un('disable', this.onItemDisabled, this);
593         item.un('enable', this.onItemEnabled, this);
594         item.un('titlechange', this.onItemTitleChanged, this);
595         item.un('iconchange', this.onItemIconChanged, this);
596         item.un('beforeshow', this.onBeforeShowItem, this);
597         if(item == this.activeTab){
598             var next = this.stack.next();
599             if(next){
600                 this.setActiveTab(next);
601             }else if(this.items.getCount() > 0){
602                 this.setActiveTab(0);
603             }else{
604                 this.activeTab = null;
605             }
606         }
607         this.delegateUpdates();
608     },
609
610     // private
611     onBeforeShowItem : function(item){
612         if(item != this.activeTab){
613             this.setActiveTab(item);
614             return false;
615         }
616     },
617
618     // private
619     onItemDisabled : function(item){
620         var el = this.getTabEl(item);
621         if(el){
622             Ext.fly(el).addClass('x-item-disabled');
623         }
624         this.stack.remove(item);
625     },
626
627     // private
628     onItemEnabled : function(item){
629         var el = this.getTabEl(item);
630         if(el){
631             Ext.fly(el).removeClass('x-item-disabled');
632         }
633     },
634
635     // private
636     onItemTitleChanged : function(item){
637         var el = this.getTabEl(item);
638         if(el){
639             Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
640         }
641     },
642
643     //private
644     onItemIconChanged : function(item, iconCls, oldCls){
645         var el = this.getTabEl(item);
646         if(el){
647             Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
648         }
649     },
650
651     <div id="method-Ext.TabPanel-getTabEl"></div>/**
652      * Gets the DOM element for the tab strip item which activates the child panel with the specified
653      * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
654      * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
655      * @return {HTMLElement} The DOM node
656      */
657     getTabEl : function(item){
658         return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId());
659     },
660
661     // private
662     onResize : function(){
663         Ext.TabPanel.superclass.onResize.apply(this, arguments);
664         this.delegateUpdates();
665     },
666
667     <div id="method-Ext.TabPanel-beginUpdate"></div>/**
668      * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
669      */
670     beginUpdate : function(){
671         this.suspendUpdates = true;
672     },
673
674     <div id="method-Ext.TabPanel-endUpdate"></div>/**
675      * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
676      */
677     endUpdate : function(){
678         this.suspendUpdates = false;
679         this.delegateUpdates();
680     },
681
682     <div id="method-Ext.TabPanel-hideTabStripItem"></div>/**
683      * Hides the tab strip item for the passed tab
684      * @param {Number/String/Panel} item The tab index, id or item
685      */
686     hideTabStripItem : function(item){
687         item = this.getComponent(item);
688         var el = this.getTabEl(item);
689         if(el){
690             el.style.display = 'none';
691             this.delegateUpdates();
692         }
693         this.stack.remove(item);
694     },
695
696     <div id="method-Ext.TabPanel-unhideTabStripItem"></div>/**
697      * Unhides the tab strip item for the passed tab
698      * @param {Number/String/Panel} item The tab index, id or item
699      */
700     unhideTabStripItem : function(item){
701         item = this.getComponent(item);
702         var el = this.getTabEl(item);
703         if(el){
704             el.style.display = '';
705             this.delegateUpdates();
706         }
707     },
708
709     // private
710     delegateUpdates : function(){
711         if(this.suspendUpdates){
712             return;
713         }
714         if(this.resizeTabs && this.rendered){
715             this.autoSizeTabs();
716         }
717         if(this.enableTabScroll && this.rendered){
718             this.autoScrollTabs();
719         }
720     },
721
722     // private
723     autoSizeTabs : function(){
724         var count = this.items.length;
725         var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
726         var ow = this[ce].dom.offsetWidth;
727         var aw = this[ce].dom.clientWidth;
728
729         if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
730             return;
731         }
732
733         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
734         this.lastTabWidth = each;
735         var lis = this.strip.query("li:not([className^=x-tab-edge])");
736         for(var i = 0, len = lis.length; i < len; i++) {
737             var li = lis[i];
738             var inner = Ext.fly(li).child('.x-tab-strip-inner', true);
739             var tw = li.offsetWidth;
740             var iw = inner.offsetWidth;
741             inner.style.width = (each - (tw-iw)) + 'px';
742         }
743     },
744
745     // private
746     adjustBodyWidth : function(w){
747         if(this.header){
748             this.header.setWidth(w);
749         }
750         if(this.footer){
751             this.footer.setWidth(w);
752         }
753         return w;
754     },
755
756     <div id="method-Ext.TabPanel-setActiveTab"></div>/**
757      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
758      * can <tt>return false</tt> to cancel the tab change.
759      * @param {String/Number} item
760      * The id or tab Panel to activate. This parameter may be any of the following:
761      * <div><ul class="mdetail-params">
762      * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
763      * or <code>{@link Ext.Component#id id}</code> of the child component </li>
764      * <li>a <b><tt>Number</tt></b> : representing the position of the child component
765      * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
766      * </ul></div>
767      * <p>For additional information see {@link Ext.util.MixedCollection#get}.
768      */
769     setActiveTab : function(item){
770         item = this.getComponent(item);
771         if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
772             return;
773         }
774         if(!this.rendered){
775             this.activeTab = item;
776             return;
777         }
778         if(this.activeTab != item){
779             if(this.activeTab){
780                 var oldEl = this.getTabEl(this.activeTab);
781                 if(oldEl){
782                     Ext.fly(oldEl).removeClass('x-tab-strip-active');
783                 }
784                 this.activeTab.fireEvent('deactivate', this.activeTab);
785             }
786             var el = this.getTabEl(item);
787             Ext.fly(el).addClass('x-tab-strip-active');
788             this.activeTab = item;
789             this.stack.add(item);
790
791             this.layout.setActiveItem(item);
792             if(this.scrolling){
793                 this.scrollToTab(item, this.animScroll);
794             }
795
796             item.fireEvent('activate', item);
797             this.fireEvent('tabchange', this, item);
798         }
799     },
800
801     <div id="method-Ext.TabPanel-getActiveTab"></div>/**
802      * Gets the currently active tab.
803      * @return {Panel} The active tab
804      */
805     getActiveTab : function(){
806         return this.activeTab || null;
807     },
808
809     <div id="method-Ext.TabPanel-getItem"></div>/**
810      * Gets the specified tab by id.
811      * @param {String} id The tab id
812      * @return {Panel} The tab
813      */
814     getItem : function(item){
815         return this.getComponent(item);
816     },
817
818     // private
819     autoScrollTabs : function(){
820         this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
821         var count = this.items.length;
822         var ow = this.pos.dom.offsetWidth;
823         var tw = this.pos.dom.clientWidth;
824
825         var wrap = this.stripWrap;
826         var wd = wrap.dom;
827         var cw = wd.offsetWidth;
828         var pos = this.getScrollPos();
829         var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
830
831         if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
832             return;
833         }
834         if(l <= tw){
835             wd.scrollLeft = 0;
836             wrap.setWidth(tw);
837             if(this.scrolling){
838                 this.scrolling = false;
839                 this.pos.removeClass('x-tab-scrolling');
840                 this.scrollLeft.hide();
841                 this.scrollRight.hide();
842                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
843                 if(Ext.isAir || Ext.isWebKit){
844                     wd.style.marginLeft = '';
845                     wd.style.marginRight = '';
846                 }
847             }
848         }else{
849             if(!this.scrolling){
850                 this.pos.addClass('x-tab-scrolling');
851                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
852                 if(Ext.isAir || Ext.isWebKit){
853                     wd.style.marginLeft = '18px';
854                     wd.style.marginRight = '18px';
855                 }
856             }
857             tw -= wrap.getMargins('lr');
858             wrap.setWidth(tw > 20 ? tw : 20);
859             if(!this.scrolling){
860                 if(!this.scrollLeft){
861                     this.createScrollers();
862                 }else{
863                     this.scrollLeft.show();
864                     this.scrollRight.show();
865                 }
866             }
867             this.scrolling = true;
868             if(pos > (l-tw)){ // ensure it stays within bounds
869                 wd.scrollLeft = l-tw;
870             }else{ // otherwise, make sure the active tab is still visible
871                 this.scrollToTab(this.activeTab, false);
872             }
873             this.updateScrollButtons();
874         }
875     },
876
877     // private
878     createScrollers : function(){
879         this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
880         var h = this.stripWrap.dom.offsetHeight;
881
882         // left
883         var sl = this.pos.insertFirst({
884             cls:'x-tab-scroller-left'
885         });
886         sl.setHeight(h);
887         sl.addClassOnOver('x-tab-scroller-left-over');
888         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
889             interval : this.scrollRepeatInterval,
890             handler: this.onScrollLeft,
891             scope: this
892         });
893         this.scrollLeft = sl;
894
895         // right
896         var sr = this.pos.insertFirst({
897             cls:'x-tab-scroller-right'
898         });
899         sr.setHeight(h);
900         sr.addClassOnOver('x-tab-scroller-right-over');
901         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
902             interval : this.scrollRepeatInterval,
903             handler: this.onScrollRight,
904             scope: this
905         });
906         this.scrollRight = sr;
907     },
908
909     // private
910     getScrollWidth : function(){
911         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
912     },
913
914     // private
915     getScrollPos : function(){
916         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
917     },
918
919     // private
920     getScrollArea : function(){
921         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
922     },
923
924     // private
925     getScrollAnim : function(){
926         return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
927     },
928
929     // private
930     getScrollIncrement : function(){
931         return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
932     },
933
934     <div id="method-Ext.TabPanel-scrollToTab"></div>/**
935      * Scrolls to a particular tab if tab scrolling is enabled
936      * @param {Panel} item The item to scroll to
937      * @param {Boolean} animate True to enable animations
938      */
939
940     scrollToTab : function(item, animate){
941         if(!item){ return; }
942         var el = this.getTabEl(item);
943         var pos = this.getScrollPos(), area = this.getScrollArea();
944         var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
945         var right = left + el.offsetWidth;
946         if(left < pos){
947             this.scrollTo(left, animate);
948         }else if(right > (pos + area)){
949             this.scrollTo(right - area, animate);
950         }
951     },
952
953     // private
954     scrollTo : function(pos, animate){
955         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
956         if(!animate){
957             this.updateScrollButtons();
958         }
959     },
960
961     onWheel : function(e){
962         var d = e.getWheelDelta()*this.wheelIncrement*-1;
963         e.stopEvent();
964
965         var pos = this.getScrollPos();
966         var newpos = pos + d;
967         var sw = this.getScrollWidth()-this.getScrollArea();
968
969         var s = Math.max(0, Math.min(sw, newpos));
970         if(s != pos){
971             this.scrollTo(s, false);
972         }
973     },
974
975     // private
976     onScrollRight : function(){
977         var sw = this.getScrollWidth()-this.getScrollArea();
978         var pos = this.getScrollPos();
979         var s = Math.min(sw, pos + this.getScrollIncrement());
980         if(s != pos){
981             this.scrollTo(s, this.animScroll);
982         }
983     },
984
985     // private
986     onScrollLeft : function(){
987         var pos = this.getScrollPos();
988         var s = Math.max(0, pos - this.getScrollIncrement());
989         if(s != pos){
990             this.scrollTo(s, this.animScroll);
991         }
992     },
993
994     // private
995     updateScrollButtons : function(){
996         var pos = this.getScrollPos();
997         this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
998         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
999     },
1000
1001     // private
1002     beforeDestroy : function() {
1003         if(this.items){
1004             this.items.each(function(item){
1005                 if(item && item.tabEl){
1006                     Ext.get(item.tabEl).removeAllListeners();
1007                     item.tabEl = null;
1008                 }
1009             }, this);
1010         }
1011         if(this.strip){
1012             this.strip.removeAllListeners();
1013         }
1014         Ext.TabPanel.superclass.beforeDestroy.apply(this);
1015     }
1016
1017     <div id="cfg-Ext.TabPanel-collapsible"></div>/**
1018      * @cfg {Boolean} collapsible
1019      * @hide
1020      */
1021     <div id="cfg-Ext.TabPanel-header"></div>/**
1022      * @cfg {String} header
1023      * @hide
1024      */
1025     <div id="cfg-Ext.TabPanel-headerAsText"></div>/**
1026      * @cfg {Boolean} headerAsText
1027      * @hide
1028      */
1029     <div id="prop-Ext.TabPanel-header"></div>/**
1030      * @property header
1031      * @hide
1032      */
1033     <div id="prop-Ext.TabPanel-title"></div>/**
1034      * @property title
1035      * @hide
1036      */
1037     <div id="cfg-Ext.TabPanel-tools"></div>/**
1038      * @cfg {Array} tools
1039      * @hide
1040      */
1041     <div id="cfg-Ext.TabPanel-toolTemplate"></div>/**
1042      * @cfg {Array} toolTemplate
1043      * @hide
1044      */
1045     <div id="cfg-Ext.TabPanel-hideCollapseTool"></div>/**
1046      * @cfg {Boolean} hideCollapseTool
1047      * @hide
1048      */
1049     <div id="cfg-Ext.TabPanel-titleCollapse"></div>/**
1050      * @cfg {Boolean} titleCollapse
1051      * @hide
1052      */
1053     <div id="cfg-Ext.TabPanel-collapsed"></div>/**
1054      * @cfg {Boolean} collapsed
1055      * @hide
1056      */
1057     <div id="cfg-Ext.TabPanel-layout"></div>/**
1058      * @cfg {String} layout
1059      * @hide
1060      */
1061     <div id="cfg-Ext.TabPanel-preventBodyReset"></div>/**
1062      * @cfg {Boolean} preventBodyReset
1063      * @hide
1064      */
1065 });
1066 Ext.reg('tabpanel', Ext.TabPanel);
1067
1068 <div id="method-Ext.TabPanel-activate"></div>/**
1069  * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1070  * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1071  * @param {String/Panel} tab The id or tab Panel to activate
1072  * @method activate
1073  */
1074 Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1075
1076 // private utility class used by TabPanel
1077 Ext.TabPanel.AccessStack = function(){
1078     var items = [];
1079     return {
1080         add : function(item){
1081             items.push(item);
1082             if(items.length > 10){
1083                 items.shift();
1084             }
1085         },
1086
1087         remove : function(item){
1088             var s = [];
1089             for(var i = 0, len = items.length; i < len; i++) {
1090                 if(items[i] != item){
1091                     s.push(items[i]);
1092                 }
1093             }
1094             items = s;
1095         },
1096
1097         next : function(){
1098             return items.pop();
1099         }
1100     };
1101 };</pre>    \r
1102 </body>\r
1103 </html>