# TabPanel.js

    /**
     * @class Ext.TabPanel
     * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel} for layout
     * purposes, but also have special support for containing child Components that are managed using a CardLayout
     * layout manager, and displayed as seperate tabs.
     * </p>
     * <p><b>Note:</b> TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
     * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons. This means that a TabPanel
     * will not display any configured title, and will not display any configured header {@link Ext.Panel#tools tools}.
     * To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
     * <b><tt>{@link Ext.Container#layout layout: 'fit'}</tt></b>.
     * </p>
     * <p><b>Note:</b> It is advisable to configure all child items of a TabPanel (and any Container which uses a CardLayout) with
     * <b><tt>{@link Ext.Component#hideMode hideMode: 'offsets'}</tt></b> to avoid rendering errors in child components hidden
     * using the CSS <tt>display</tt> style.
     * </p>
     * <p>There is no actual tab class &mdash; each tab is simply a {@link Ext.BoxComponent Component} such
     * as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component can fire
     * additional events that only exist for tabs and are not available from other Component. These are:
     * </p>
     * <ul>
     * <li><b>activate</b>: Fires when this Component becomes the active tab.
     * <div class="mdetail-params">
     *      <strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong>
     *      <ul><li><code>tab</code> : Panel<div class="sub-desc">The tab that was activated</div></li></ul>
     *  </div></li>
     * <li><b>deactivate</b>: Fires when the Component that was the active tab becomes deactivated.
     * <div class="mdetail-params">
     *      <strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong>
     *      <ul><li><code>tab</code> : Panel<div class="sub-desc">The tab that was deactivated</div></li></ul>
     *  </div></li>
     * </ul>
     * <p>To add Components to a TabPanel which are generated dynamically on the server, it is necessary to
     * create a server script to generate the Javascript to create the Component required.</p>
     * For example, to add a GridPanel to a TabPanel where the GridPanel is generated by the server
     * based on certain parameters, you would need to execute an Ajax request to invoke your the script,
     * and process the response object to add it to the TabPanel:</p><pre><code>
    Ext.Ajax.request({
        url: 'gen-invoice-grid.php',
        params: {
            startDate : Ext.getCmp('start-date').getValue(),
            endDate : Ext.getCmp('end-date').getValue()
        },
        success: function(xhr) {
            var newComponent = eval(xhr.responseText);
            myTabPanel.add(newComponent);
            myTabPanel.setActiveTab(newComponent);
        },
        failure: function() {
            Ext.Msg.alert("Grid create failed", "Server communication failure");
        }
    });
    </code></pre>
     * <p>The server script would need to return an executable Javascript statement which, when processed
     * using <tt>eval()</tt> will return either a config object with an {@link Ext.Component#xtype xtype},
     * or an instantiated Component. For example:</p><pre><code>
    (function() {
        function formatDate(value){
            return value ? value.dateFormat('M d, Y') : '';
        };

        var store = new Ext.data.Store({
            url: 'get-invoice-data.php',
            baseParams: {
                startDate: '01/01/2008',
                endDate: '01/31/2008'
            },
            reader: new Ext.data.JsonReader({
                record: 'transaction',
                id: 'id',
                totalRecords: 'total'
            }, [
               'customer',
               'invNo',
               {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
               {name: 'value', type: 'float'}
            ])
        });

        var grid = new Ext.grid.GridPanel({
            title: 'Invoice Report',
            bbar: new Ext.PagingToolbar(store),
            store: store,
            columns: [
                {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
                {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
                {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
                {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
            ],
        });
        store.load();
        return grid;
    })();
    </code></pre>
     * <p>Since that code is <i>generated</i> by a server script, the <tt>baseParams</tt> for the Store
     * can be configured into the Store. The metadata to allow generation of the Record layout, and the
     * ColumnModel is also known on the server, so these can be generated into the code.</p>
     * <p>When that code fragment is passed through the <tt>eval</tt> function in the success handler
     * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
     * runs, and returns the grid.</p>
     * <p>There are several other methods available for creating TabPanels. The output of the following
     * examples should produce exactly the same appearance. The tabs can be created and rendered completely
     * in code, as in this example:</p>
     * <pre><code>
    var tabs = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        activeTab: 0,
        items: [{
            title: 'Tab 1',
            html: 'A simple tab'
        },{
            title: 'Tab 2',
            html: 'Another one'
        }]
    });
    </code></pre>
      * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.  See the {@link #autoTabs} example for
      * rendering entirely from markup that is already structured correctly as a TabPanel (a container div with
      * one or more nested tab divs with class 'x-tab'). You can also render from markup that is not strictly
      * structured by simply specifying by id which elements should be the container and the tabs. Using this method,
      * tab content can be pulled from different elements within the page by id regardless of page structure.  Note
      * that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered deferred
      * without displaying outside the tabs. You could alternately set {@link #deferredRender} to false to render all
      * content tabs on page load. For example:
      * <pre><code>
    var tabs = new Ext.TabPanel({
        renderTo: 'my-tabs',
        activeTab: 0,
        items:[
            {contentEl:'tab1', title:'Tab 1'},
            {contentEl:'tab2', title:'Tab 2'}
        ]
    });

    // Note that the tabs do not have to be nested within the container (although they can be)
    &lt;div id="my-tabs">&lt;/div>
    &lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
    &lt;div id="tab2" class="x-hide-display">Another one&lt;/div>
    </code></pre>
     * @extends Ext.Panel
     * @constructor
     * @param {Object} config The configuration options
     */
    Ext.TabPanel = Ext.extend(Ext.Panel,  {
        /**
         * @cfg {Boolean} layoutOnTabChange Set to true to do a layout of tab items as tabs are changed.
         */
    // holder
    /***
         * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
         * class name applied to the tab strip item representing the child Component, allowing special
         * styling to be applied.
         */
    // holder
    /***
         * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
         * browser resize (defaults to true).
         */
        monitorResize : true,
        /**
         * @cfg {Boolean} deferredRender Internally, the TabPanel uses a {@link Ext.layout.CardLayout} to manage its tabs.
         * This property will be passed on to the layout as its {@link Ext.layout.CardLayout#deferredRender} config value,
         * determining whether or not each tab is rendered only when first accessed (defaults to true).
         * <p>Be aware that leaving deferredRender as <b><tt>true</tt></b> means that, if the TabPanel is within
         * a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within that tab will not
         * be rendered, and will therefore not be submitted and will not be available to either
         * {@link Ext.form.BasicForm#getValues getValues} or {@link Ext.form.BasicForm#setValues setValues}.</p>
         */
        deferredRender : true,
        /**
         * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
         */
        tabWidth: 120,
        /**
         * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
         */
        minTabWidth: 30,
        /**
         * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
         * tab strip (defaults to false).  Setting this to true may cause specific widths that might be set per tab to
         * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
         */
        resizeTabs:false,
        /**
         * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
         * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
         */
        enableTabScroll: false,
        /**
         * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed (defaults
         * to 100, or if {@link #resizeTabs} = true, the calculated tab width).  Only applies when {@link #enableTabScroll} = true.
         */
        scrollIncrement : 0,
        /**
         * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
         * continuously pressed (defaults to 400).
         */
        scrollRepeatInterval : 400,
        /**
         * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults to .35).
         * Only applies when {@link #animScroll} = true.
         */
        scrollDuration : .35,
        /**
         * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
         * to true).  Only applies when {@link #enableTabScroll} = true.
         */
        animScroll : true,
        /**
         * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to 'top').  The only
         * other supported value is 'bottom'.  Note that tab scrolling is only supported for position 'top'.
         */
        tabPosition: 'top',
        /**
         * @cfg {String} baseCls The base CSS class applied to the panel (defaults to 'x-tab-panel').
         */
        baseCls: 'x-tab-panel',
        /**
         * @cfg {Boolean} autoTabs
         * <p>True to query the DOM for any divs with a class of 'x-tab' to be automatically converted
         * to tabs and added to this panel (defaults to false).  Note that the query will be executed within the scope of
         * the container element only (so that multiple tab panels from markup can be supported via this method).</p>
         * <p>This method is only possible when the markup is structured correctly as a container with nested
         * divs containing the class 'x-tab'. To create TabPanels without these limitations, or to pull tab content from
         * other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
         * <p>There are a couple of things to note when using this method:<ul>
         * <li>When using the autoTabs config (as opposed to passing individual tab configs in the TabPanel's
         * {@link #items} collection), you must use {@link #applyTo} to correctly use the specified id as the tab container.
         * The autoTabs method <em>replaces</em> existing content with the TabPanel components.</li>
         * <li>Make sure that you set {@link #deferredRender} to false so that the content elements for each tab will be
         * rendered into the TabPanel immediately upon page load, otherwise they will not be transformed until each tab
         * is activated and will be visible outside the TabPanel.</li>
         * </ul>Example usage:</p>
         * <pre><code>
    var tabs = new Ext.TabPanel({
        applyTo: 'my-tabs',
        activeTab: 0,
        deferredRender: false,
        autoTabs: true
    });

    // This markup will be converted to a TabPanel from the code above
    &lt;div id="my-tabs">
        &lt;div class="x-tab" title="Tab 1">A simple tab&lt;/div>
        &lt;div class="x-tab" title="Tab 2">Another one&lt;/div>
    &lt;/div>
    </code></pre>
         */
        autoTabs : false,
        /**
         * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when {@link #autoTabs}
         * = true (defaults to 'div.x-tab').  This can be any valid selector supported by {@link Ext.DomQuery#select}.
         * Note that the query will be executed within the scope of this tab panel only (so that multiple tab panels from
         * markup can be supported on a page).
         */
        autoTabSelector:'div.x-tab',
        /**
         * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
         * activated on render (defaults to none).
         */
        activeTab : null,
        /**
         * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of tabs. If you
         * change the margin in CSS, you will need to update this value so calculations are correct with either resizeTabs
         * or scrolling tabs. (defaults to 2)
         */
        tabMargin : 2,
        /**
         * @cfg {Boolean} plain True to render the tab strip without a background container image (defaults to false).
         */
        plain: false,
        /**
         * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to 20).
         */
        wheelIncrement : 20,

        /*
         * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
         * It does not generally need to be changed, but can be if external code also uses an id scheme that can
         * potentially clash with this one.
         */
        idDelimiter : '__',

        // private
        itemCls : 'x-tab-item',

        // private config overrides
        elements: 'body',
        headerAsText: false,
        frame: false,
        hideBorders:true,

        // private
        initComponent : function(){
            this.frame = false;
            Ext.TabPanel.superclass.initComponent.call(this);
            this.addEvents(
                /**
                 * @event beforetabchange
                 * Fires before the active tab changes. Handlers can return false to cancel the tab change.
                 * @param {TabPanel} this
                 * @param {Panel} newTab The tab being activated
                 * @param {Panel} currentTab The current active tab
                 */
                'beforetabchange',
                /**
                 * @event tabchange
                 * Fires after the active tab has changed.
                 * @param {TabPanel} this
                 * @param {Panel} tab The new active tab
                 */
                'tabchange',
                /**
                 * @event contextmenu
                 * Relays the contextmenu event from a tab selector element in the tab strip.
                 * @param {TabPanel} this
                 * @param {Panel} tab The target tab
                 * @param {EventObject} e
                 */
                'contextmenu'
            );
            this.setLayout(new Ext.layout.CardLayout({
                deferredRender: this.deferredRender
            }));
            if(this.tabPosition == 'top'){
                this.elements += ',header';
                this.stripTarget = 'header';
            }else {
                this.elements += ',footer';
                this.stripTarget = 'footer';
            }
            if(!this.stack){
                this.stack = Ext.TabPanel.AccessStack();
            }
            this.initItems();
        },

        // private
        render : function(){
            Ext.TabPanel.superclass.render.apply(this, arguments);
            if(this.activeTab !== undefined){
                var item = this.activeTab;
                delete this.activeTab;
                this.setActiveTab(item);
            }
        },

        // private
        onRender : function(ct, position){
            Ext.TabPanel.superclass.onRender.call(this, ct, position);

            if(this.plain){
                var pos = this.tabPosition == 'top' ? 'header' : 'footer';
                this[pos].addClass('x-tab-panel-'+pos+'-plain');
            }

            var st = this[this.stripTarget];

            this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
                tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});

            var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
            this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
            this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

            this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
            this.strip.createChild({cls:'x-clear'});

            this.body.addClass('x-tab-panel-body-'+this.tabPosition);

            if(!this.itemTpl){
                var tt = new Ext.Template(
                     '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
                     '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
                     '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
                     '</em></a></li>'
                );
                tt.disableFormats = true;
                tt.compile();
                Ext.TabPanel.prototype.itemTpl = tt;
            }

            this.items.each(this.initTab, this);
        },

        // private
        afterRender : function(){
            Ext.TabPanel.superclass.afterRender.call(this);
            if(this.autoTabs){
                this.readTabs(false);
            }
        },

        // private
        initEvents : function(){
            Ext.TabPanel.superclass.initEvents.call(this);
            this.on('add', this.onAdd, this);
            this.on('remove', this.onRemove, this);

            this.strip.on('mousedown', this.onStripMouseDown, this);
            this.strip.on('contextmenu', this.onStripContextMenu, this);
            if(this.enableTabScroll){
                this.strip.on('mousewheel', this.onWheel, this);
            }
        },

        // private
        findTargets : function(e){
            var item = null;
            var itemEl = e.getTarget('li', this.strip);
            if(itemEl){
                item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
                if(item.disabled){
                    return {
                        close : null,
                        item : null,
                        el : null
                    };
                }
            }
            return {
                close : e.getTarget('.x-tab-strip-close', this.strip),
                item : item,
                el : itemEl
            };
        },

        // private
        onStripMouseDown : function(e){
            if(e.button != 0){
                return;
            }
            e.preventDefault();
            var t = this.findTargets(e);
            if(t.close){
                this.remove(t.item);
                return;
            }
            if(t.item && t.item != this.activeTab){
                this.setActiveTab(t.item);
            }
        },

        // private
        onStripContextMenu : function(e){
            e.preventDefault();
            var t = this.findTargets(e);
            if(t.item){
                this.fireEvent('contextmenu', this, t.item, e);
            }
        },

        /**
         * True to scan the markup in this tab panel for autoTabs using the autoTabSelector
         * @param {Boolean} removeExisting True to remove existing tabs
         */
        readTabs : function(removeExisting){
            if(removeExisting === true){
                this.items.each(function(item){
                    this.remove(item);
                }, this);
            }
            var tabs = this.el.query(this.autoTabSelector);
            for(var i = 0, len = tabs.length; i < len; i++){
                var tab = tabs[i];
                var title = tab.getAttribute('title');
                tab.removeAttribute('title');
                this.add({
                    title: title,
                    contentEl: tab
                });
            }
        },

        // private
        initTab : function(item, index){
            var before = this.strip.dom.childNodes[index];
            var cls = item.closable ? 'x-tab-strip-closable' : '';
            if(item.disabled){
                cls += ' x-item-disabled';
            }
            if(item.iconCls){
                cls += ' x-tab-with-icon';
            }
            if(item.tabCls){
                cls += ' ' + item.tabCls;
            }

            var p = {
                id: this.id + this.idDelimiter + item.getItemId(),
                text: item.title,
                cls: cls,
                iconCls: item.iconCls || ''
            };
            var el = before ?
                     this.itemTpl.insertBefore(before, p) :
                     this.itemTpl.append(this.strip, p);

            Ext.fly(el).addClassOnOver('x-tab-strip-over');

            if(item.tabTip){
                Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
            }
            item.tabEl = el;

            item.on('disable', this.onItemDisabled, this);
            item.on('enable', this.onItemEnabled, this);
            item.on('titlechange', this.onItemTitleChanged, this);
            item.on('iconchange', this.onItemIconChanged, this);
            item.on('beforeshow', this.onBeforeShowItem, this);
        },

        // private
        onAdd : function(tp, item, index){
            this.initTab(item, index);
            if(this.items.getCount() == 1){
                this.syncSize();
            }
            this.delegateUpdates();
        },

        // private
        onBeforeAdd : function(item){
            var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
            if(existing){
                this.setActiveTab(item);
                return false;
            }
            Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
            var es = item.elements;
            item.elements = es ? es.replace(',header', '') : es;
            item.border = (item.border === true);
        },

        // private
        onRemove : function(tp, item){
            Ext.destroy(Ext.get(this.getTabEl(item)));
            this.stack.remove(item);
            item.un('disable', this.onItemDisabled, this);
            item.un('enable', this.onItemEnabled, this);
            item.un('titlechange', this.onItemTitleChanged, this);
            item.un('iconchange', this.onItemIconChanged, this);
            item.un('beforeshow', this.onBeforeShowItem, this);
            if(item == this.activeTab){
                var next = this.stack.next();
                if(next){
                    this.setActiveTab(next);
                }else if(this.items.getCount() > 0){
                    this.setActiveTab(0);
                }else{
                    this.activeTab = null;
                }
            }
            this.delegateUpdates();
        },

        // private
        onBeforeShowItem : function(item){
            if(item != this.activeTab){
                this.setActiveTab(item);
                return false;
            }
        },

        // private
        onItemDisabled : function(item){
            var el = this.getTabEl(item);
            if(el){
                Ext.fly(el).addClass('x-item-disabled');
            }
            this.stack.remove(item);
        },

        // private
        onItemEnabled : function(item){
            var el = this.getTabEl(item);
            if(el){
                Ext.fly(el).removeClass('x-item-disabled');
            }
        },

        // private
        onItemTitleChanged : function(item){
            var el = this.getTabEl(item);
            if(el){
                Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
            }
        },

        //private
        onItemIconChanged: function(item, iconCls, oldCls){
            var el = this.getTabEl(item);
            if(el){
                Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
            }
        },

        /**
         * Gets the DOM element for tab strip item which activates the
         * child panel with the specified ID. Access this to change the visual treatment of the
         * item, for example by changing the CSS class name.
         * @param {Panel/Number} tab The tab component, or the tab's index
         * @return {HTMLElement} The DOM node
         */
        getTabEl : function(item){
            var itemId = (typeof item === 'number')?this.items.items[item].getItemId() : item.getItemId();
            return document.getElementById(this.id+this.idDelimiter+itemId);
        },

        // private
        onResize : function(){
            Ext.TabPanel.superclass.onResize.apply(this, arguments);
            this.delegateUpdates();
        },

        /**
         * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
         */
        beginUpdate : function(){
            this.suspendUpdates = true;
        },

        /**
         * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
         */
        endUpdate : function(){
            this.suspendUpdates = false;
            this.delegateUpdates();
        },

        /**
         * Hides the tab strip item for the passed tab
         * @param {Number/String/Panel} item The tab index, id or item
         */
        hideTabStripItem : function(item){
            item = this.getComponent(item);
            var el = this.getTabEl(item);
            if(el){
                el.style.display = 'none';
                this.delegateUpdates();
            }
            this.stack.remove(item);
        },

        /**
         * Unhides the tab strip item for the passed tab
         * @param {Number/String/Panel} item The tab index, id or item
         */
        unhideTabStripItem : function(item){
            item = this.getComponent(item);
            var el = this.getTabEl(item);
            if(el){
                el.style.display = '';
                this.delegateUpdates();
            }
        },

        // private
        delegateUpdates : function(){
            if(this.suspendUpdates){
                return;
            }
            if(this.resizeTabs && this.rendered){
                this.autoSizeTabs();
            }
            if(this.enableTabScroll && this.rendered){
                this.autoScrollTabs();
            }
        },

        // private
        autoSizeTabs : function(){
            var count = this.items.length;
            var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
            var ow = this[ce].dom.offsetWidth;
            var aw = this[ce].dom.clientWidth;

            if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
                return;
            }

            var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
            this.lastTabWidth = each;
            var lis = this.stripWrap.dom.getElementsByTagName('li');
            for(var i = 0, len = lis.length-1; i < len; i++) { // -1 for the "edge" li
                var li = lis[i];
                var inner = li.childNodes[1].firstChild.firstChild;
                var tw = li.offsetWidth;
                var iw = inner.offsetWidth;
                inner.style.width = (each - (tw-iw)) + 'px';
            }
        },

        // private
        adjustBodyWidth : function(w){
            if(this.header){
                this.header.setWidth(w);
            }
            if(this.footer){
                this.footer.setWidth(w);
            }
            return w;
        },

        /**
         * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
         * can return false to cancel the tab change.
         * @param {String/Panel} tab The id or tab Panel to activate
         */
        setActiveTab : function(item){
            item = this.getComponent(item);
            if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
                return;
            }
            if(!this.rendered){
                this.activeTab = item;
                return;
            }
            if(this.activeTab != item){
                if(this.activeTab){
                    var oldEl = this.getTabEl(this.activeTab);
                    if(oldEl){
                        Ext.fly(oldEl).removeClass('x-tab-strip-active');
                    }
                    this.activeTab.fireEvent('deactivate', this.activeTab);
                }
                var el = this.getTabEl(item);
                Ext.fly(el).addClass('x-tab-strip-active');
                this.activeTab = item;
                this.stack.add(item);

                this.layout.setActiveItem(item);
                if(this.layoutOnTabChange && item.doLayout){
                    item.doLayout();
                }
                if(this.scrolling){
                    this.scrollToTab(item, this.animScroll);
                }

                item.fireEvent('activate', item);
                this.fireEvent('tabchange', this, item);
            }
        },

        /**
         * Gets the currently active tab.
         * @return {Panel} The active tab
         */
        getActiveTab : function(){
            return this.activeTab || null;
        },

        /**
         * Gets the specified tab by id.
         * @param {String} id The tab id
         * @return {Panel} The tab
         */
        getItem : function(item){
            return this.getComponent(item);
        },

        // private
        autoScrollTabs : function(){
            this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
            var count = this.items.length;
            var ow = this.pos.dom.offsetWidth;
            var tw = this.pos.dom.clientWidth;

            var wrap = this.stripWrap;
            var wd = wrap.dom;
            var cw = wd.offsetWidth;
            var pos = this.getScrollPos();
            var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;

            if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
                return;
            }
            if(l <= tw){
                wd.scrollLeft = 0;
                wrap.setWidth(tw);
                if(this.scrolling){
                    this.scrolling = false;
                    this.pos.removeClass('x-tab-scrolling');
                    this.scrollLeft.hide();
                    this.scrollRight.hide();
                    // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                    if(Ext.isAir || Ext.isWebKit){
                        wd.style.marginLeft = '';
                        wd.style.marginRight = '';
                    }
                }
            }else{
                if(!this.scrolling){
                    this.pos.addClass('x-tab-scrolling');
                    // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                    if(Ext.isAir || Ext.isWebKit){
                        wd.style.marginLeft = '18px';
                        wd.style.marginRight = '18px';
                    }
                }
                tw -= wrap.getMargins('lr');
                wrap.setWidth(tw > 20 ? tw : 20);
                if(!this.scrolling){
                    if(!this.scrollLeft){
                        this.createScrollers();
                    }else{
                        this.scrollLeft.show();
                        this.scrollRight.show();
                    }
                }
                this.scrolling = true;
                if(pos > (l-tw)){ // ensure it stays within bounds
                    wd.scrollLeft = l-tw;
                }else{ // otherwise, make sure the active tab is still visible
                    this.scrollToTab(this.activeTab, false);
                }
                this.updateScrollButtons();
            }
        },

        // private
        createScrollers : function(){
            this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
            var h = this.stripWrap.dom.offsetHeight;

            // left
            var sl = this.pos.insertFirst({
                cls:'x-tab-scroller-left'
            });
            sl.setHeight(h);
            sl.addClassOnOver('x-tab-scroller-left-over');
            this.leftRepeater = new Ext.util.ClickRepeater(sl, {
                interval : this.scrollRepeatInterval,
                handler: this.onScrollLeft,
                scope: this
            });
            this.scrollLeft = sl;

            // right
            var sr = this.pos.insertFirst({
                cls:'x-tab-scroller-right'
            });
            sr.setHeight(h);
            sr.addClassOnOver('x-tab-scroller-right-over');
            this.rightRepeater = new Ext.util.ClickRepeater(sr, {
                interval : this.scrollRepeatInterval,
                handler: this.onScrollRight,
                scope: this
            });
            this.scrollRight = sr;
        },

        // private
        getScrollWidth : function(){
            return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
        },

        // private
        getScrollPos : function(){
            return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
        },

        // private
        getScrollArea : function(){
            return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
        },

        // private
        getScrollAnim : function(){
            return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
        },

        // private
        getScrollIncrement : function(){
            return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
        },

        /**
         * Scrolls to a particular tab if tab scrolling is enabled
         * @param {Panel} item The item to scroll to
         * @param {Boolean} animate True to enable animations
         */

        scrollToTab : function(item, animate){
            if(!item){ return; }
            var el = this.getTabEl(item);
            var pos = this.getScrollPos(), area = this.getScrollArea();
            var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
            var right = left + el.offsetWidth;
            if(left < pos){
                this.scrollTo(left, animate);
            }else if(right > (pos + area)){
                this.scrollTo(right - area, animate);
            }
        },

        // private
        scrollTo : function(pos, animate){
            this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
            if(!animate){
                this.updateScrollButtons();
            }
        },

        onWheel : function(e){
            var d = e.getWheelDelta()*this.wheelIncrement*-1;
            e.stopEvent();

            var pos = this.getScrollPos();
            var newpos = pos + d;
            var sw = this.getScrollWidth()-this.getScrollArea();

            var s = Math.max(0, Math.min(sw, newpos));
            if(s != pos){
                this.scrollTo(s, false);
            }
        },

        // private
        onScrollRight : function(){
            var sw = this.getScrollWidth()-this.getScrollArea();
            var pos = this.getScrollPos();
            var s = Math.min(sw, pos + this.getScrollIncrement());
            if(s != pos){
                this.scrollTo(s, this.animScroll);
            }
        },

        // private
        onScrollLeft : function(){
            var pos = this.getScrollPos();
            var s = Math.max(0, pos - this.getScrollIncrement());
            if(s != pos){
                this.scrollTo(s, this.animScroll);
            }
        },

        // private
        updateScrollButtons : function(){
            var pos = this.getScrollPos();
            this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
            this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
        },

        // private
        beforeDestroy : function() {
            if(this.items){
                this.items.each(function(item){
                    if(item && item.tabEl){
                        Ext.get(item.tabEl).removeAllListeners();
                        item.tabEl = null;
                    }
                }, this);
            }
            if(this.strip){
                this.strip.removeAllListeners();
            }
            Ext.TabPanel.superclass.beforeDestroy.apply(this);
        }

        /**
         * @cfg {Boolean} collapsible
         * @hide
         */
    // holder
    /***
         * @cfg {String} header
         * @hide
         */
    // holder
    /***
         * @cfg {Boolean} headerAsText
         * @hide
         */
    // holder
    /***
         * @property header
         * @hide
         */
    // holder
    /***
         * @property title
         * @hide
         */
    // holder
    /***
         * @cfg {Array} tools
         * @hide
         */
    // holder
    /***
         * @cfg {Boolean} hideCollapseTool
         * @hide
         */
    // holder
    /***
         * @cfg {Boolean} titleCollapse
         * @hide
         */
    // holder
    /***
         * @cfg {Boolean} collapsed
         * @hide
         */
    // holder
    /***
         * @cfg {String} layout
         * @hide
         */
    // holder
    /***
         * @cfg {Object} layoutConfig
         * @hide
         */

    });
    Ext.reg('tabpanel', Ext.TabPanel);

    /**
     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
     * can return false to cancel the tab change.
     * @param {String/Panel} tab The id or tab Panel to activate
     * @method activate
     */
    Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;

    // private utility class used by TabPanel
    Ext.TabPanel.AccessStack = function(){
        var items = [];
        return {
            add : function(item){
                items.push(item);
                if(items.length > 10){
                    items.shift();
                }
            },

            remove : function(item){
                var s = [];
                for(var i = 0, len = items.length; i < len; i++) {
                    if(items[i] != item){
                        s.push(items[i]);
                    }
                }
                items = s;
            },

            next : function(){
                return items.pop();
            }
        };
    };

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.