Upgrade to ExtJS 3.2.1 - Released 04/27/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.2.1
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.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         if(this.suspendUpdates){
752             return;
753         }
754         if(this.resizeTabs && this.rendered){
755             this.autoSizeTabs();
756         }
757         if(this.enableTabScroll && this.rendered){
758             this.autoScrollTabs();
759         }
760     },
761
762     // private
763     autoSizeTabs : function(){
764         var count = this.items.length,
765             ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
766             ow = this[ce].dom.offsetWidth,
767             aw = this[ce].dom.clientWidth;
768
769         if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
770             return;
771         }
772
773         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
774         this.lastTabWidth = each;
775         var lis = this.strip.query('li:not(.x-tab-edge)');
776         for(var i = 0, len = lis.length; i < len; i++) {
777             var li = lis[i],
778                 inner = Ext.fly(li).child('.x-tab-strip-inner', true),
779                 tw = li.offsetWidth,
780                 iw = inner.offsetWidth;
781             inner.style.width = (each - (tw-iw)) + 'px';
782         }
783     },
784
785     // private
786     adjustBodyWidth : function(w){
787         if(this.header){
788             this.header.setWidth(w);
789         }
790         if(this.footer){
791             this.footer.setWidth(w);
792         }
793         return w;
794     },
795
796     <div id="method-Ext.TabPanel-setActiveTab"></div>/**
797      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
798      * can <tt>return false</tt> to cancel the tab change.
799      * @param {String/Number} item
800      * The id or tab Panel to activate. This parameter may be any of the following:
801      * <div><ul class="mdetail-params">
802      * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
803      * or <code>{@link Ext.Component#id id}</code> of the child component </li>
804      * <li>a <b><tt>Number</tt></b> : representing the position of the child component
805      * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
806      * </ul></div>
807      * <p>For additional information see {@link Ext.util.MixedCollection#get}.
808      */
809     setActiveTab : function(item){
810         item = this.getComponent(item);
811         if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
812             return;
813         }
814         if(!this.rendered){
815             this.activeTab = item;
816             return;
817         }
818         if(this.activeTab != item){
819             if(this.activeTab){
820                 var oldEl = this.getTabEl(this.activeTab);
821                 if(oldEl){
822                     Ext.fly(oldEl).removeClass('x-tab-strip-active');
823                 }
824             }
825             this.activeTab = item;
826             if(item){
827                 var el = this.getTabEl(item);
828                 Ext.fly(el).addClass('x-tab-strip-active');
829                 this.stack.add(item);
830
831                 this.layout.setActiveItem(item);
832                 if(this.scrolling){
833                     this.scrollToTab(item, this.animScroll);
834                 }
835             }
836             this.fireEvent('tabchange', this, item);
837         }
838     },
839
840     <div id="method-Ext.TabPanel-getActiveTab"></div>/**
841      * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
842      * first activates a child Component, this method will return whatever was configured in the
843      * {@link #activeTab} config option.</b>
844      * @return {BoxComponent} The currently active child Component if one <i>is</i> active, or the {@link #activeTab} config value.
845      */
846     getActiveTab : function(){
847         return this.activeTab || null;
848     },
849
850     <div id="method-Ext.TabPanel-getItem"></div>/**
851      * Gets the specified tab by id.
852      * @param {String} id The tab id
853      * @return {Panel} The tab
854      */
855     getItem : function(item){
856         return this.getComponent(item);
857     },
858
859     // private
860     autoScrollTabs : function(){
861         this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
862         var count = this.items.length,
863             ow = this.pos.dom.offsetWidth,
864             tw = this.pos.dom.clientWidth,
865             wrap = this.stripWrap,
866             wd = wrap.dom,
867             cw = wd.offsetWidth,
868             pos = this.getScrollPos(),
869             l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
870
871         if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
872             return;
873         }
874         if(l <= tw){
875             wd.scrollLeft = 0;
876             wrap.setWidth(tw);
877             if(this.scrolling){
878                 this.scrolling = false;
879                 this.pos.removeClass('x-tab-scrolling');
880                 this.scrollLeft.hide();
881                 this.scrollRight.hide();
882                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
883                 if(Ext.isAir || Ext.isWebKit){
884                     wd.style.marginLeft = '';
885                     wd.style.marginRight = '';
886                 }
887             }
888         }else{
889             if(!this.scrolling){
890                 this.pos.addClass('x-tab-scrolling');
891                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
892                 if(Ext.isAir || Ext.isWebKit){
893                     wd.style.marginLeft = '18px';
894                     wd.style.marginRight = '18px';
895                 }
896             }
897             tw -= wrap.getMargins('lr');
898             wrap.setWidth(tw > 20 ? tw : 20);
899             if(!this.scrolling){
900                 if(!this.scrollLeft){
901                     this.createScrollers();
902                 }else{
903                     this.scrollLeft.show();
904                     this.scrollRight.show();
905                 }
906             }
907             this.scrolling = true;
908             if(pos > (l-tw)){ // ensure it stays within bounds
909                 wd.scrollLeft = l-tw;
910             }else{ // otherwise, make sure the active tab is still visible
911                 this.scrollToTab(this.activeTab, false);
912             }
913             this.updateScrollButtons();
914         }
915     },
916
917     // private
918     createScrollers : function(){
919         this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
920         var h = this.stripWrap.dom.offsetHeight;
921
922         // left
923         var sl = this.pos.insertFirst({
924             cls:'x-tab-scroller-left'
925         });
926         sl.setHeight(h);
927         sl.addClassOnOver('x-tab-scroller-left-over');
928         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
929             interval : this.scrollRepeatInterval,
930             handler: this.onScrollLeft,
931             scope: this
932         });
933         this.scrollLeft = sl;
934
935         // right
936         var sr = this.pos.insertFirst({
937             cls:'x-tab-scroller-right'
938         });
939         sr.setHeight(h);
940         sr.addClassOnOver('x-tab-scroller-right-over');
941         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
942             interval : this.scrollRepeatInterval,
943             handler: this.onScrollRight,
944             scope: this
945         });
946         this.scrollRight = sr;
947     },
948
949     // private
950     getScrollWidth : function(){
951         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
952     },
953
954     // private
955     getScrollPos : function(){
956         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
957     },
958
959     // private
960     getScrollArea : function(){
961         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
962     },
963
964     // private
965     getScrollAnim : function(){
966         return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
967     },
968
969     // private
970     getScrollIncrement : function(){
971         return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
972     },
973
974     <div id="method-Ext.TabPanel-scrollToTab"></div>/**
975      * Scrolls to a particular tab if tab scrolling is enabled
976      * @param {Panel} item The item to scroll to
977      * @param {Boolean} animate True to enable animations
978      */
979
980     scrollToTab : function(item, animate){
981         if(!item){
982             return;
983         }
984         var el = this.getTabEl(item),
985             pos = this.getScrollPos(),
986             area = this.getScrollArea(),
987             left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
988             right = left + el.offsetWidth;
989         if(left < pos){
990             this.scrollTo(left, animate);
991         }else if(right > (pos + area)){
992             this.scrollTo(right - area, animate);
993         }
994     },
995
996     // private
997     scrollTo : function(pos, animate){
998         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
999         if(!animate){
1000             this.updateScrollButtons();
1001         }
1002     },
1003
1004     onWheel : function(e){
1005         var d = e.getWheelDelta()*this.wheelIncrement*-1;
1006         e.stopEvent();
1007
1008         var pos = this.getScrollPos(),
1009             newpos = pos + d,
1010             sw = this.getScrollWidth()-this.getScrollArea();
1011
1012         var s = Math.max(0, Math.min(sw, newpos));
1013         if(s != pos){
1014             this.scrollTo(s, false);
1015         }
1016     },
1017
1018     // private
1019     onScrollRight : function(){
1020         var sw = this.getScrollWidth()-this.getScrollArea(),
1021             pos = this.getScrollPos(),
1022             s = Math.min(sw, pos + this.getScrollIncrement());
1023         if(s != pos){
1024             this.scrollTo(s, this.animScroll);
1025         }
1026     },
1027
1028     // private
1029     onScrollLeft : function(){
1030         var pos = this.getScrollPos(),
1031             s = Math.max(0, pos - this.getScrollIncrement());
1032         if(s != pos){
1033             this.scrollTo(s, this.animScroll);
1034         }
1035     },
1036
1037     // private
1038     updateScrollButtons : function(){
1039         var pos = this.getScrollPos();
1040         this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
1041         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
1042     },
1043
1044     // private
1045     beforeDestroy : function() {
1046         Ext.destroy(this.leftRepeater, this.rightRepeater);
1047         this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
1048         this.activeTab = null;
1049         Ext.TabPanel.superclass.beforeDestroy.apply(this);
1050     }
1051
1052     <div id="cfg-Ext.TabPanel-collapsible"></div>/**
1053      * @cfg {Boolean} collapsible
1054      * @hide
1055      */
1056     <div id="cfg-Ext.TabPanel-header"></div>/**
1057      * @cfg {String} header
1058      * @hide
1059      */
1060     <div id="cfg-Ext.TabPanel-headerAsText"></div>/**
1061      * @cfg {Boolean} headerAsText
1062      * @hide
1063      */
1064     <div id="prop-Ext.TabPanel-header"></div>/**
1065      * @property header
1066      * @hide
1067      */
1068     <div id="cfg-Ext.TabPanel-null"></div>/**
1069      * @cfg title
1070      * @hide
1071      */
1072     <div id="cfg-Ext.TabPanel-tools"></div>/**
1073      * @cfg {Array} tools
1074      * @hide
1075      */
1076     <div id="cfg-Ext.TabPanel-toolTemplate"></div>/**
1077      * @cfg {Array} toolTemplate
1078      * @hide
1079      */
1080     <div id="cfg-Ext.TabPanel-hideCollapseTool"></div>/**
1081      * @cfg {Boolean} hideCollapseTool
1082      * @hide
1083      */
1084     <div id="cfg-Ext.TabPanel-titleCollapse"></div>/**
1085      * @cfg {Boolean} titleCollapse
1086      * @hide
1087      */
1088     <div id="cfg-Ext.TabPanel-collapsed"></div>/**
1089      * @cfg {Boolean} collapsed
1090      * @hide
1091      */
1092     <div id="cfg-Ext.TabPanel-layout"></div>/**
1093      * @cfg {String} layout
1094      * @hide
1095      */
1096     <div id="cfg-Ext.TabPanel-preventBodyReset"></div>/**
1097      * @cfg {Boolean} preventBodyReset
1098      * @hide
1099      */
1100 });
1101 Ext.reg('tabpanel', Ext.TabPanel);
1102
1103 <div id="method-Ext.TabPanel-activate"></div>/**
1104  * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1105  * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1106  * @param {String/Panel} tab The id or tab Panel to activate
1107  * @method activate
1108  */
1109 Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1110
1111 // private utility class used by TabPanel
1112 Ext.TabPanel.AccessStack = function(){
1113     var items = [];
1114     return {
1115         add : function(item){
1116             items.push(item);
1117             if(items.length > 10){
1118                 items.shift();
1119             }
1120         },
1121
1122         remove : function(item){
1123             var s = [];
1124             for(var i = 0, len = items.length; i < len; i++) {
1125                 if(items[i] != item){
1126                     s.push(items[i]);
1127                 }
1128             }
1129             items = s;
1130         },
1131
1132         next : function(){
1133             return items.pop();
1134         }
1135     };
1136 };
1137 </pre>    
1138 </body>
1139 </html>