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.0
  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             if(items.getCount() == 1 && !this.collapsed){
 600                 this.syncSize();
 601             }
 602             this.delegateUpdates();
 603         }
 604     },
 605
 606     // private
 607     onBeforeAdd : function(item){
 608         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
 609         if(existing){
 610             this.setActiveTab(item);
 611             return false;
 612         }
 613         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
 614         var es = item.elements;
 615         item.elements = es ? es.replace(',header', '') : es;
 616         item.border = (item.border === true);
 617     },
 618
 619     // private
 620     onRemove : function(c){
 621         var te = Ext.get(c.tabEl);
 622         // check if the tabEl exists, it won't if the tab isn't rendered
 623         if(te){
 624             te.select('a').removeAllListeners();
 625             Ext.destroy(te);
 626         }
 627         Ext.TabPanel.superclass.onRemove.call(this, c);
 628         this.stack.remove(c);
 629         delete c.tabEl;
 630         c.un('disable', this.onItemDisabled, this);
 631         c.un('enable', this.onItemEnabled, this);
 632         c.un('titlechange', this.onItemTitleChanged, this);
 633         c.un('iconchange', this.onItemIconChanged, this);
 634         c.un('beforeshow', this.onBeforeShowItem, this);
 635         if(c == this.activeTab){
 636             var next = this.stack.next();
 637             if(next){
 638                 this.setActiveTab(next);
 639             }else if(this.items.getCount() > 0){
 640                 this.setActiveTab(0);
 641             }else{
 642                 this.setActiveTab(null);
 643             }
 644         }
 645         if(!this.destroying){
 646             this.delegateUpdates();
 647         }
 648     },
 649
 650     // private
 651     onBeforeShowItem : function(item){
 652         if(item != this.activeTab){
 653             this.setActiveTab(item);
 654             return false;
 655         }
 656     },
 657
 658     // private
 659     onItemDisabled : function(item){
 660         var el = this.getTabEl(item);
 661         if(el){
 662             Ext.fly(el).addClass('x-item-disabled');
 663         }
 664         this.stack.remove(item);
 665     },
 666
 667     // private
 668     onItemEnabled : function(item){
 669         var el = this.getTabEl(item);
 670         if(el){
 671             Ext.fly(el).removeClass('x-item-disabled');
 672         }
 673     },
 674
 675     // private
 676     onItemTitleChanged : function(item){
 677         var el = this.getTabEl(item);
 678         if(el){
 679             Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
 680         }
 681     },
 682
 683     //private
 684     onItemIconChanged : function(item, iconCls, oldCls){
 685         var el = this.getTabEl(item);
 686         if(el){
 687             el = Ext.get(el);
 688             el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
 689             el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
 690         }
 691     },
 692
 693     <div id="method-Ext.TabPanel-getTabEl"></div>/**
 694      * Gets the DOM element for the tab strip item which activates the child panel with the specified
 695      * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
 696      * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
 697      * @return {HTMLElement} The DOM node
 698      */
 699     getTabEl : function(item){
 700         var c = this.getComponent(item);
 701         return c ? c.tabEl : null;
 702     },
 703
 704     // private
 705     onResize : function(){
 706         Ext.TabPanel.superclass.onResize.apply(this, arguments);
 707         this.delegateUpdates();
 708     },
 709
 710     <div id="method-Ext.TabPanel-beginUpdate"></div>/**
 711      * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
 712      */
 713     beginUpdate : function(){
 714         this.suspendUpdates = true;
 715     },
 716
 717     <div id="method-Ext.TabPanel-endUpdate"></div>/**
 718      * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
 719      */
 720     endUpdate : function(){
 721         this.suspendUpdates = false;
 722         this.delegateUpdates();
 723     },
 724
 725     <div id="method-Ext.TabPanel-hideTabStripItem"></div>/**
 726      * Hides the tab strip item for the passed tab
 727      * @param {Number/String/Panel} item The tab index, id or item
 728      */
 729     hideTabStripItem : function(item){
 730         item = this.getComponent(item);
 731         var el = this.getTabEl(item);
 732         if(el){
 733             el.style.display = 'none';
 734             this.delegateUpdates();
 735         }
 736         this.stack.remove(item);
 737     },
 738
 739     <div id="method-Ext.TabPanel-unhideTabStripItem"></div>/**
 740      * Unhides the tab strip item for the passed tab
 741      * @param {Number/String/Panel} item The tab index, id or item
 742      */
 743     unhideTabStripItem : function(item){
 744         item = this.getComponent(item);
 745         var el = this.getTabEl(item);
 746         if(el){
 747             el.style.display = '';
 748             this.delegateUpdates();
 749         }
 750     },
 751
 752     // private
 753     delegateUpdates : function(){
 754         if(this.suspendUpdates){
 755             return;
 756         }
 757         if(this.resizeTabs && this.rendered){
 758             this.autoSizeTabs();
 759         }
 760         if(this.enableTabScroll && this.rendered){
 761             this.autoScrollTabs();
 762         }
 763     },
 764
 765     // private
 766     autoSizeTabs : function(){
 767         var count = this.items.length,
 768             ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
 769             ow = this[ce].dom.offsetWidth,
 770             aw = this[ce].dom.clientWidth;
 771
 772         if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
 773             return;
 774         }
 775
 776         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
 777         this.lastTabWidth = each;
 778         var lis = this.strip.query('li:not(.x-tab-edge)');
 779         for(var i = 0, len = lis.length; i < len; i++) {
 780             var li = lis[i],
 781                 inner = Ext.fly(li).child('.x-tab-strip-inner', true),
 782                 tw = li.offsetWidth,
 783                 iw = inner.offsetWidth;
 784             inner.style.width = (each - (tw-iw)) + 'px';
 785         }
 786     },
 787
 788     // private
 789     adjustBodyWidth : function(w){
 790         if(this.header){
 791             this.header.setWidth(w);
 792         }
 793         if(this.footer){
 794             this.footer.setWidth(w);
 795         }
 796         return w;
 797     },
 798
 799     <div id="method-Ext.TabPanel-setActiveTab"></div>/**
 800      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
 801      * can <tt>return false</tt> to cancel the tab change.
 802      * @param {String/Number} item
 803      * The id or tab Panel to activate. This parameter may be any of the following:
 804      * <div><ul class="mdetail-params">
 805      * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
 806      * or <code>{@link Ext.Component#id id}</code> of the child component </li>
 807      * <li>a <b><tt>Number</tt></b> : representing the position of the child component
 808      * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
 809      * </ul></div>
 810      * <p>For additional information see {@link Ext.util.MixedCollection#get}.
 811      */
 812     setActiveTab : function(item){
 813         item = this.getComponent(item);
 814         if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
 815             return;
 816         }
 817         if(!this.rendered){
 818             this.activeTab = item;
 819             return;
 820         }
 821         if(this.activeTab != item){
 822             if(this.activeTab){
 823                 var oldEl = this.getTabEl(this.activeTab);
 824                 if(oldEl){
 825                     Ext.fly(oldEl).removeClass('x-tab-strip-active');
 826                 }
 827             }
 828             if(item){
 829                 var el = this.getTabEl(item);
 830                 Ext.fly(el).addClass('x-tab-strip-active');
 831                 this.activeTab = item;
 832                 this.stack.add(item);
 833
 834                 this.layout.setActiveItem(item);
 835                 if(this.scrolling){
 836                     this.scrollToTab(item, this.animScroll);
 837                 }
 838             }
 839             this.fireEvent('tabchange', this, item);
 840         }
 841     },
 842
 843     <div id="method-Ext.TabPanel-getActiveTab"></div>/**
 844      * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
 845      * first activates a child Component, this method will return whatever was configured in the
 846      * {@link #activeTab} config option.</b>
 847      * @return {BoxComponent} The currently active child Component if one <i>is</i> active, or the {@link #activeTab} config value.
 848      */
 849     getActiveTab : function(){
 850         return this.activeTab || null;
 851     },
 852
 853     <div id="method-Ext.TabPanel-getItem"></div>/**
 854      * Gets the specified tab by id.
 855      * @param {String} id The tab id
 856      * @return {Panel} The tab
 857      */
 858     getItem : function(item){
 859         return this.getComponent(item);
 860     },
 861
 862     // private
 863     autoScrollTabs : function(){
 864         this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
 865         var count = this.items.length,
 866             ow = this.pos.dom.offsetWidth,
 867             tw = this.pos.dom.clientWidth,
 868             wrap = this.stripWrap,
 869             wd = wrap.dom,
 870             cw = wd.offsetWidth,
 871             pos = this.getScrollPos(),
 872             l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
 873
 874         if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
 875             return;
 876         }
 877         if(l <= tw){
 878             wd.scrollLeft = 0;
 879             wrap.setWidth(tw);
 880             if(this.scrolling){
 881                 this.scrolling = false;
 882                 this.pos.removeClass('x-tab-scrolling');
 883                 this.scrollLeft.hide();
 884                 this.scrollRight.hide();
 885                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
 886                 if(Ext.isAir || Ext.isWebKit){
 887                     wd.style.marginLeft = '';
 888                     wd.style.marginRight = '';
 889                 }
 890             }
 891         }else{
 892             if(!this.scrolling){
 893                 this.pos.addClass('x-tab-scrolling');
 894                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
 895                 if(Ext.isAir || Ext.isWebKit){
 896                     wd.style.marginLeft = '18px';
 897                     wd.style.marginRight = '18px';
 898                 }
 899             }
 900             tw -= wrap.getMargins('lr');
 901             wrap.setWidth(tw > 20 ? tw : 20);
 902             if(!this.scrolling){
 903                 if(!this.scrollLeft){
 904                     this.createScrollers();
 905                 }else{
 906                     this.scrollLeft.show();
 907                     this.scrollRight.show();
 908                 }
 909             }
 910             this.scrolling = true;
 911             if(pos > (l-tw)){ // ensure it stays within bounds
 912                 wd.scrollLeft = l-tw;
 913             }else{ // otherwise, make sure the active tab is still visible
 914                 this.scrollToTab(this.activeTab, false);
 915             }
 916             this.updateScrollButtons();
 917         }
 918     },
 919
 920     // private
 921     createScrollers : function(){
 922         this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
 923         var h = this.stripWrap.dom.offsetHeight;
 924
 925         // left
 926         var sl = this.pos.insertFirst({
 927             cls:'x-tab-scroller-left'
 928         });
 929         sl.setHeight(h);
 930         sl.addClassOnOver('x-tab-scroller-left-over');
 931         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
 932             interval : this.scrollRepeatInterval,
 933             handler: this.onScrollLeft,
 934             scope: this
 935         });
 936         this.scrollLeft = sl;
 937
 938         // right
 939         var sr = this.pos.insertFirst({
 940             cls:'x-tab-scroller-right'
 941         });
 942         sr.setHeight(h);
 943         sr.addClassOnOver('x-tab-scroller-right-over');
 944         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
 945             interval : this.scrollRepeatInterval,
 946             handler: this.onScrollRight,
 947             scope: this
 948         });
 949         this.scrollRight = sr;
 950     },
 951
 952     // private
 953     getScrollWidth : function(){
 954         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
 955     },
 956
 957     // private
 958     getScrollPos : function(){
 959         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
 960     },
 961
 962     // private
 963     getScrollArea : function(){
 964         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
 965     },
 966
 967     // private
 968     getScrollAnim : function(){
 969         return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
 970     },
 971
 972     // private
 973     getScrollIncrement : function(){
 974         return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
 975     },
 976
 977     <div id="method-Ext.TabPanel-scrollToTab"></div>/**
 978      * Scrolls to a particular tab if tab scrolling is enabled
 979      * @param {Panel} item The item to scroll to
 980      * @param {Boolean} animate True to enable animations
 981      */
 982
 983     scrollToTab : function(item, animate){
 984         if(!item){
 985             return;
 986         }
 987         var el = this.getTabEl(item),
 988             pos = this.getScrollPos(),
 989             area = this.getScrollArea(),
 990             left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
 991             right = left + el.offsetWidth;
 992         if(left < pos){
 993             this.scrollTo(left, animate);
 994         }else if(right > (pos + area)){
 995             this.scrollTo(right - area, animate);
 996         }
 997     },
 998
 999     // private
1000     scrollTo : function(pos, animate){
1001         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
1002         if(!animate){
1003             this.updateScrollButtons();
1004         }
1005     },
1006
1007     onWheel : function(e){
1008         var d = e.getWheelDelta()*this.wheelIncrement*-1;
1009         e.stopEvent();
1010
1011         var pos = this.getScrollPos(),
1012             newpos = pos + d,
1013             sw = this.getScrollWidth()-this.getScrollArea();
1014
1015         var s = Math.max(0, Math.min(sw, newpos));
1016         if(s != pos){
1017             this.scrollTo(s, false);
1018         }
1019     },
1020
1021     // private
1022     onScrollRight : function(){
1023         var sw = this.getScrollWidth()-this.getScrollArea(),
1024             pos = this.getScrollPos(),
1025             s = Math.min(sw, pos + this.getScrollIncrement());
1026         if(s != pos){
1027             this.scrollTo(s, this.animScroll);
1028         }
1029     },
1030
1031     // private
1032     onScrollLeft : function(){
1033         var pos = this.getScrollPos(),
1034             s = Math.max(0, pos - this.getScrollIncrement());
1035         if(s != pos){
1036             this.scrollTo(s, this.animScroll);
1037         }
1038     },
1039
1040     // private
1041     updateScrollButtons : function(){
1042         var pos = this.getScrollPos();
1043         this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
1044         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
1045     },
1046
1047     // private
1048     beforeDestroy : function() {
1049         Ext.destroy(this.leftRepeater, this.rightRepeater);
1050         this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
1051         this.activeTab = null;
1052         Ext.TabPanel.superclass.beforeDestroy.apply(this);
1053     }
1054
1055     <div id="cfg-Ext.TabPanel-collapsible"></div>/**
1056      * @cfg {Boolean} collapsible
1057      * @hide
1058      */
1059     <div id="cfg-Ext.TabPanel-header"></div>/**
1060      * @cfg {String} header
1061      * @hide
1062      */
1063     <div id="cfg-Ext.TabPanel-headerAsText"></div>/**
1064      * @cfg {Boolean} headerAsText
1065      * @hide
1066      */
1067     <div id="prop-Ext.TabPanel-header"></div>/**
1068      * @property header
1069      * @hide
1070      */
1071     <div id="cfg-Ext.TabPanel-null"></div>/**
1072      * @cfg title
1073      * @hide
1074      */
1075     <div id="cfg-Ext.TabPanel-tools"></div>/**
1076      * @cfg {Array} tools
1077      * @hide
1078      */
1079     <div id="cfg-Ext.TabPanel-toolTemplate"></div>/**
1080      * @cfg {Array} toolTemplate
1081      * @hide
1082      */
1083     <div id="cfg-Ext.TabPanel-hideCollapseTool"></div>/**
1084      * @cfg {Boolean} hideCollapseTool
1085      * @hide
1086      */
1087     <div id="cfg-Ext.TabPanel-titleCollapse"></div>/**
1088      * @cfg {Boolean} titleCollapse
1089      * @hide
1090      */
1091     <div id="cfg-Ext.TabPanel-collapsed"></div>/**
1092      * @cfg {Boolean} collapsed
1093      * @hide
1094      */
1095     <div id="cfg-Ext.TabPanel-layout"></div>/**
1096      * @cfg {String} layout
1097      * @hide
1098      */
1099     <div id="cfg-Ext.TabPanel-preventBodyReset"></div>/**
1100      * @cfg {Boolean} preventBodyReset
1101      * @hide
1102      */
1103 });
1104 Ext.reg('tabpanel', Ext.TabPanel);
1105
1106 <div id="method-Ext.TabPanel-activate"></div>/**
1107  * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1108  * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1109  * @param {String/Panel} tab The id or tab Panel to activate
1110  * @method activate
1111  */
1112 Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1113
1114 // private utility class used by TabPanel
1115 Ext.TabPanel.AccessStack = function(){
1116     var items = [];
1117     return {
1118         add : function(item){
1119             items.push(item);
1120             if(items.length > 10){
1121                 items.shift();
1122             }
1123         },
1124
1125         remove : function(item){
1126             var s = [];
1127             for(var i = 0, len = items.length; i < len; i++) {
1128                 if(items[i] != item){
1129                     s.push(items[i]);
1130                 }
1131             }
1132             items = s;
1133         },
1134
1135         next : function(){
1136             return items.pop();
1137         }
1138     };
1139 };
1140 </pre>
1141 </body>
1142 </html>