docs/source/TabPanel.html

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