ExtJs_Ext.TabPanel解释

原创 2011年09月28日 13:59:16

/*!
 * Ext JS Library 3.3.1
 */
/**
 * @class Ext.TabPanel
 * <p>A basic tab container. TabPanels can be used exactly(确切地) like a standard {Ext.Panel}
 * for layout purposes(效果), but also have special(特别的) support for containing child Components;
 * 
 * 注意:<tt> 标签呈现类似打字机或者等宽的文本效果;
 * (<tt>{Ext.Container#items items}</tt>) that are managed using a
 * {Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate(分开) tabs.</p>
 *
 * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component //<i>斜体;
 * and all its descendants(后代). This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
 * re-use of a tab, configure the TabPanel with <b><code>{#autoDestroy autoDestroy: false}</code></b>.
 *
 * <p><b><u>TabPanel header/footer elements</u></b></p> //<u>下划线;
 * <p>TabPanels use their {Ext.Panel#header header} or {Ext.Panel#footer footer} element
 * (depending on the {#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 {Ext.Panel#tools tools}.</p>
 * <p>To display a header, embed(插入) the TabPanel in a {Ext.Panel Panel} which uses
 * <b><tt>{Ext.Container#layout layout:'fit'}</tt></b>.</p>
 *
 * <p><b><u>Tab Events</u></b></p>
 * <p>There is no actual(实在的) tab class &mdash;(为分割线"—"符号) each tab is simply(只不过) a {Ext.BoxComponent Component}
 * such as a {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 Components.
 * These events are:</p>
 * <div><ul class="mdetail-params">
 * <li><tt><b>{Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes the active tab.</li>
 * <li><tt><b>{Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that was the active tab becomes 
 * deactivated.</li>
 * <li><tt><b>{Ext.Panel#beforeclose beforeclose}</b></tt> : Fires when the user clicks on the close tool of a closeable 
 * tab.
 * May be vetoed(否决) by returning <code>false</code> from a handler.</li>
 * <li><tt><b>{Ext.Panel#close close}</b></tt> : Fires a closeable tab has been closed by the user.</li>
 * </ul></div>
 * <p><b><u>Creating TabPanels from Code</u></b></p>
 * <p>TabPanels 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><b><u>Creating TabPanels from Existing Markup(标记)</u></b></p>
 * <p>TabPanels can also be rendered from pre-existing markup in a couple(一些) of ways.</p>
 * <div><ul class="mdetail-params">
 *
 * <li>Pre-Structured Markup</li>
 * <div class="sub-desc">
 * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely(全部地)
 * from existing markup (See the {#autoTabs} example).</p>
 * </div>
 *
 * <li>Un-Structured Markup</li>
 * <div class="sub-desc">
 * <p>A TabPanel can also be rendered 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. For example:</p>
 * <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>


 * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
 * deferred(延期的) without displaying outside the tabs. You could alternately(轮流地) set <tt>{#deferredRender} = false </tt>
 * to render all content tabs on page load.
 * </div>
 * </ul></div>
 *
 * @extends Ext.Panel
 * @constructor
 * @param {Object} config_The configuration options
 * @xtype tabpanel
 */
Ext.TabPanel = Ext.extend(Ext.Panel,  {
    /**
     * @cfg {Boolean} layoutOnTabChange
     * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
     * See {Ext.layout.CardLayout}.<code>{Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
     */
    /**
     * @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.
     */
    /**
     * @cfg {Boolean} deferredRender //延期渲染;
     * <p><tt>true</tt> by default to defer the rendering of child <tt>{Ext.Container#items items}</tt>
     * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
     * <tt>{Ext.Container#items items}</tt> as soon as the {Ext.layout.CardLayout layout}
     * is rendered. If there is a significant(有效的) amount of content or a lot of heavy controls being
     * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
     * improve performance(执行).</p>
     * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
     * TabPanels ({Ext.layout.CardLayout}) as its {Ext.layout.CardLayout#deferredRender}
     * configuration value.</p>
     * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
     * within an unactivated tab will not be available. For example, this means that if the TabPanel
     * is within a {Ext.form.FormPanel form}, then until a tab is activated, any Fields within
     * unactivated tabs will not be rendered, and will therefore(因此) not be submitted and will not be
     * available to either {Ext.form.BasicForm#getValues getValues} or
     * {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 {#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 {#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 <tt>100</tt>, or if <tt>{#resizeTabs} = true</tt>, the calculated(适当的) tab width).  Only
     * applies when <tt>{#enableTabScroll} = true</tt>.
     */
    scrollIncrement : 0,
    /**
     * @cfg {Number} scrollRepeatInterval_Number of milliseconds between each scroll while a tab scroll button is
     * continuously(连续不断地) pressed (defaults to <tt>400</tt>).
     */
    scrollRepeatInterval : 400,
    /**
     * @cfg {Float} scrollDuration_The number of milliseconds that each scroll animation should last (defaults
     * to <tt>.35</tt>). Only applies when <tt>{#animScroll} = true</tt>.
     */
    scrollDuration : 0.35,
    /**
     * @cfg {Boolean} animScroll_True to animate tab scrolling so that hidden tabs slide smoothly(流畅地) into view (defaults
     * to <tt>true</tt>).  Only applies when <tt>{#enableTabScroll} = true</tt>.
     */
    animScroll : true,
    /**
     * @cfg {String} tabPosition_The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
     * The only other supported value is <tt>'bottom'</tt>.  <b>Note</b>: tab scrolling is only supported for
     * <tt>tabPosition: 'top'</tt>.
     */
    tabPosition : 'top',
    /**
     * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
     */
    baseCls : 'x-tab-panel',
    /**
     * @cfg {Boolean} autoTabs
     * <p><tt>true</tt> 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 <tt>false</tt>).  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 <tt>'x-tab'</tt>. 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 <tt>autoTabs</tt> config (as opposed to passing individual(特殊的) tab configs in the TabPanel's
     * {#items} collection), you must use <tt>{#applyTo}</tt> to correctly use the specified <tt>id</tt>
     * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
     * components.</li>
     * <li>Make sure that you set <tt>{#deferredRender}: false</tt> 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
     * <tt>{#autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>).  This can be any valid selector
     * supported by {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 undefined).
     */
    activeTab : undefined,
    /**
     * @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 <tt>{#resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
     */
    tabMargin : 2,
    /**
     * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
     * (defaults to <tt>false</tt>).
     */
    plain : false,
    /**
     * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
     * scrolling (defaults to <tt>20</tt>).
     */
    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 : '__', //Delimiter:分隔符;


    // 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 <tt>return false</tt> 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'
        );
        /**
         * @cfg {Object} layoutConfig
         * TabPanel implicitly(绝对地) uses {Ext.layout.CardLayout} as its layout manager.
         * <code>layoutConfig</code> may be used to configure this layout manager.
         * <code>{#deferredRender}</code> and <code>{#layoutOnTabChange}</code>
         * configured on the TabPanel will be applied as configs to the layout manager.
         */
        this.setLayout(new Ext.layout.CardLayout(Ext.apply({
            layoutOnCardChange: this.layoutOnTabChange,
            deferredRender: this.deferredRender
        }, this.layoutConfig)));


        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
    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);
        st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);


        // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text',
         cn: '&#160;'}]});
        this.strip.createChild({cls:'x-clear'});


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


        /**
         * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {Ext.Template Template} or
         * {Ext.XTemplate XTemplate} which may be provided to process(数据处理) the data object returned from
         * <tt>{#getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
         * <p>The main element created should be a <tt>&lt;li></tt> element. In order for a click event on
         * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
         * native <tt>{#getTemplateArgs}</tt>.</p>
         * <p>The child element which contains the title text must be marked by the CSS class
         * <tt>x-tab-strip-inner</tt>.</p>
         * <p>To enable closability, the created element should contain an element marked by the CSS class
         * <tt>x-tab-strip-close</tt>.</p>
         * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility(责任) to create CSS
         * style rules to create the desired(想得到的) appearance(效果).</p>
         * Below is an example of how to create customized(自定义的) tab selector items:<pre><code>
new Ext.TabPanel({
   renderTo: document.body,
   minTabWidth: 115,
   tabWidth: 135,
   enableTabScroll: true,
   width: 600,
   height: 250,
   defaults: {autoScroll:true},
   itemTpl: new Ext.XTemplate(
   '&lt;li class="{cls}" id="{id}" style="overflow:hidden">',
        '&lt;tpl if="closable">',
           '&lt;a class="x-tab-strip-close">&lt;/a>',
        '&lt;/tpl>',
        '&lt;a class="x-tab-right" href="#" style="padding-left:6px">',
           '&lt;em class="x-tab-left">',
               '&lt;span class="x-tab-strip-inner">',
                   '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0">',
                   '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}">',
                    '{text} {extra}&lt;/span>',
               '&lt;/span>',
           '&lt;/em>',
       '&lt;/a>',
   '&lt;/li>'
   ),
   getTemplateArgs: function(item) {
//      Call the native method to collect the base data. Like the ID!
       var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

//      Add stuff(属性) used in our template
       return Ext.apply(result, {
           closable: item.closable,
           src: item.iconSrc,
           extra: item.extraText || ''
       });
   },
   items: [{
       title: 'New Tab 1',
       iconSrc: '../shared/icons/fam/grid.png',
       html: 'Tab Body 1',
       closable: true
   }, {
       title: 'New Tab 2',
       iconSrc: '../shared/icons/fam/grid.png',
       html: 'Tab Body 2',
       extraText: 'Extra stuff in the tab button'
   }]
});
* </code></pre>
         */
        if(!this.itemTpl){
            var tt = new Ext.Template(
                 '<li class="{cls}" id="{id}">' +
                 '<a class="x-tab-strip-close"></a>',
                 '<a class="x-tab-right" href="#">' +
                 '<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);
        }
        if(this.activeTab !== undefined){
            var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
            delete this.activeTab;
            this.setActiveTab(item);
        }
    },


    // private
    initEvents : function(){
        Ext.TabPanel.superclass.initEvents.call(this);
        this.mon(this.strip, {
            scope: this,
            mousedown: this.onStripMouseDown,
            contextmenu: this.onStripContextMenu
        });
        if(this.enableTabScroll){
            this.mon(this.strip, 'mousewheel', this.onWheel, this);
        }
    },


    // private
    findTargets : function(e){
        var item = null,
            itemEl = e.getTarget('li:not(.x-tab-edge)', 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){
            if (t.item.fireEvent('beforeclose', t.item) !== false) {
                t.item.fireEvent('close', t.item);
                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 <tt>{#autoTabs}</tt> using the
     * <tt>{#autoTabSelector}</tt>
     * @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],
                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],
            p = this.getTemplateArgs(item),
            el = before ?
                 this.itemTpl.insertBefore(before, p) :
                 this.itemTpl.append(this.strip, p),
            cls = 'x-tab-strip-over',
            tabEl = Ext.get(el);


        tabEl.hover(function(){
            if(!item.disabled){
                tabEl.addClass(cls);
            }
        }, function(){
            tabEl.removeClass(cls);
        });


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


        // Route *keyboard triggered(键盘触发)* click events to the tab strip mouse handler.
        tabEl.select('a').on('click', function(e){
            if(!e.getPageX()){
                this.onStripMouseDown(e);
            }
        }, this, {preventDefault: true});


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


    /**
     * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
     * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{#itemTpl}</tt>
     * to create a formatted, clickable tab selector element. The properties which must be returned
     * are:</p><div class="mdetail-params"><ul>
     * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
     * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
     * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
     * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance(外观) for an icon.</div></li>
     * </ul></div>
     * @param {Ext.BoxComponent} item The {Ext.BoxComponent BoxComponent} for which to create a selector element 
     * in the tab strip.
     * @return {Object} An object hash containing the properties required to render the selector element.
     */
    getTemplateArgs : function(item) {
        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;
        }


        return {
            id: this.id + this.idDelimiter + item.getItemId(),
            text: item.title,
            cls: cls,
            iconCls: item.iconCls || ''
        };
    },


    // private
    onAdd : function(c){
        Ext.TabPanel.superclass.onAdd.call(this, c);
        if(this.rendered){
            var items = this.items;
            this.initTab(c, items.indexOf(c));
            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(c){
        var te = Ext.get(c.tabEl);
        // check if the tabEl exists, it won't if the tab isn't rendered
        if(te){
            te.select('a').removeAllListeners();
            Ext.destroy(te);
        }
        Ext.TabPanel.superclass.onRemove.call(this, c);
        this.stack.remove(c);
        delete c.tabEl;
        c.un('disable', this.onItemDisabled, this);
        c.un('enable', this.onItemEnabled, this);
        c.un('titlechange', this.onItemTitleChanged, this);
        c.un('iconchange', this.onItemIconChanged, this);
        c.un('beforeshow', this.onBeforeShowItem, this);
        if(c == this.activeTab){
            var next = this.stack.next();
            if(next){
                this.setActiveTab(next);
            }else if(this.items.getCount() > 0){
                this.setActiveTab(0);
            }else{
                this.setActiveTab(null);
            }
        }
        if(!this.destroying){
            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){
            el = Ext.get(el);
            el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
            el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
        }
    },


    /**
     * Gets the DOM element for the 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/String} tab The tab component, or the tab's index, or the tabs id or itemId.
     * @return {HTMLElement} The DOM node
     */
    getTabEl : function(item){
        var c = this.getComponent(item);
        return c ? c.tabEl : null;
    },


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


    /**
     * Suspends(暂停) any internal calculations(计算) or scrolling while doing a bulk(大量的) operation. See {#endUpdate}
     */
    beginUpdate : function(){
        this.suspendUpdates = true;
    },


    /**
     * Resumes(重新开始) calculations(计算) and scrolling at the end of a bulk(大量的) operation. See {#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(){
        var rendered = this.rendered;
        if(this.suspendUpdates){
            return;
        }
        if(this.resizeTabs && rendered){
            this.autoSizeTabs();
        }
        if(this.enableTabScroll && rendered){
            this.autoScrollTabs();
        }
    },


    // private
    autoSizeTabs : function(){
        var count = this.items.length,
            ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
            ow = this[ce].dom.offsetWidth,
            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.strip.query('li:not(.x-tab-edge)');
        for(var i = 0, len = lis.length; i < len; i++) {
            var li = lis[i],
                inner = Ext.fly(li).child('.x-tab-strip-inner', true),
                tw = li.offsetWidth,
                iw = inner.offsetWidth;
            inner.style.width = (each - (tw-iw)) + 'px';
        }
    },


    // private_adjust调整
    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 {#beforetabchange} event which
     * can <tt>return false</tt> to cancel the tab change.
     * @param {String/Number} item
     * The id or tab Panel to activate. This parameter may be any of the following:
     *String: representing(表示) the {Ext.Component#itemId itemId} or {Ext.Component#id id}of the child component;
     *Number: representing the position of the child component within the {Ext.Container#items items} property;
     * For additional(额外的) information(信息) see {Ext.util.MixedCollection#get}.
     */
    setActiveTab : function(item){
        item = this.getComponent(item);
        if(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 = item;
            if(item){
                var el = this.getTabEl(item);
                Ext.fly(el).addClass('x-tab-strip-active');
                this.stack.add(item);


                this.layout.setActiveItem(item);
                // Need to do this here, since setting the active tab slightly(稍微地) changes the size
                this.delegateUpdates();
                if(this.scrolling){
                    this.scrollToTab(item, this.animScroll);
                }
            }
            this.fireEvent('tabchange', this, item);
        }
    },


    /**
     * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
     * first activates a child Component, this method will return whatever was configured in the
     * {#activeTab} config option.</b>
     * @return {BoxComponent} The currently active child Component if one <i>is</i> active, 
     * or the {#activeTab} config value.
     */
    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,
            ow = this.pos.dom.offsetWidth,
            tw = this.pos.dom.clientWidth,
            wrap = this.stripWrap,
            wd = wrap.dom,
            cw = wd.offsetWidth,
            pos = this.getScrollPos(),
            l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;


        if(!this.enableTabScroll || cw < 20){ // 20 to prevent display:none issues
            return;
        }
        if(count == 0 || l <= tw){
            // ensure the width is set if there's no tabs
            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),
            pos = this.getScrollPos(),
            area = this.getScrollArea(),
            left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
            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(),
            newpos = pos + d,
            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(),
            pos = this.getScrollPos(),
            s = Math.min(sw, pos + this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },


    // private
    onScrollLeft : function(){
        var pos = this.getScrollPos(),
            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() {
        Ext.destroy(this.leftRepeater, this.rightRepeater);
        this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
        this.activeTab = null;
        Ext.TabPanel.superclass.beforeDestroy.apply(this);
    }


    /**
     * @cfg {Boolean} collapsible
     * @hide
     */
    /**
     * @cfg {String} header
     * @hide
     */
    /**
     * @cfg {Boolean} headerAsText
     * @hide
     */
    /**
     * @property header
     * @hide
     */
    /**
     * @cfg title
     * @hide
     */
    /**
     * @cfg {Array} tools
     * @hide
     */
    /**
     * @cfg {Array} toolTemplate
     * @hide
     */
    /**
     * @cfg {Boolean} hideCollapseTool
     * @hide
     */
    /**
     * @cfg {Boolean} titleCollapse
     * @hide
     */
    /**
     * @cfg {Boolean} collapsed
     * @hide
     */
    /**
     * @cfg {String} layout
     * @hide
     */
    /**
     * @cfg {Boolean} preventBodyReset
     * @hide
     */
});
Ext.reg('tabpanel', Ext.TabPanel);


/**
 * See {#setActiveTab}. Sets the specified tab as the active tab. This method fires
 * the {#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(); //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();
        }
    };
};

ExtJs4.2学习--Ext.tab.Panel 选项卡

1、基本标签的容器中。 TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的,但也有包含正在使用CardLayout布局管理器管理的子组件(项目)的特殊支持,并显示为单独的...

Ext.TabPanel 各属性一览

1、主要配置项:       activeTab:初始激活的tab,索引或者id值,默认为none         autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到...

Extjs学习 Ext.TabPanel

下面介绍ExtJS的TabPanel。TabPanel是一个面板,它的每一个标签又是一个一个面板。     代码如下,看完后和Panel的进行比较,更加了解一下他们两个的继承关系。 ...

ExtJs学习系列(5)--Ext.TabPanel

效果图片: js代码: Ext.onReady(function(){      var tabsDemo=new Ext.TabPanel({             renderTo:...

ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

通过此文能学习到如下内容        1.创建一个简单的面板 Ext.Panel        2.制作一个可以拖动的面板 Ext.Panel        3 .使用选项卡面板      ...

EXT中TREEPANEL控件和TABPANEL

在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板,随着左边节点的选择表现不同的功能内容,这是一个相当经典的布局,在Ext框架中,有两个控件TreePanel和TabPanel刚好完成这些功...

ExtJS tabPanel实例

  • 2011年07月11日 09:12
  • 3KB
  • 下载

JS 简单实现Ext.TabPanel效果

JS 简单实现Ext.TabPanel效果(转载)   2011-04-26 16:35:32|  分类: 默认分类 |  标签:js  ext  tab   |举报 |字号大中小 订阅 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJs_Ext.TabPanel解释
举报原因:
原因补充:

(最多只允许输入30个字)