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