pkgs/pkg-tabs-debug.js

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