pkgs/pkg-tabs-debug.js

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