[2.0+] TabPanel with tabPosition:'bottom' - header element.

[Animal]

There is an inconsistency in how TabPanel handles tabPosition:'bottom'.

Normally, a TabPanel may not have a title because it conflicts with placing the tab strip in the header element. But if the tab position is 'bottom', it should process the title normally. Common sense should dictate that if there is no interference from essential machinery like tab strip, the title config should be honoured.

It does not do this. The Panel processing still sees the title config and creates the header element.

But the title is not rendered into that header element.

Also, in IE7/8, the header element shows up 25 pixels deep, even though it is empty.

The following code is a modified version of examples/tabs/tabs-adv.js

You can see the empty header in IE.

Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
    	title: 'A TabPanel',
    	tabPosition: 'bottom',
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

    // tab generation code
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tabs');
});

[Animal]

This fixes it for me:

    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
             * Fires when the original browser contextmenu event originated from a tab element.
             * @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 {
//          If tabPosition:'bottom', header may contain title text
            this.headerAsText = true;

            this.elements += ',footer';
            this.stripTarget = 'footer';
        }
        if(!this.stack){
            this.stack = Ext.TabPanel.AccessStack();
        }
        this.initItems();
        if(this.activeTab !== undefined && typeof this.activeTab != 'object'){
           this.activeTab = this.items.get(this.activeTab);
        }
    },

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

//      If tabPosition:'bottom' revert to standard Panel header class.
        if((this.tabPosition == 'bottom') && this.header){
            this.header.removeClass(this.headerCls);
            this.headerCls = this.headerCls.replace('-tab', '');
            this.header.addClass(this.headerCls);
        }

        var st = this[this.stripTarget];
        if(this.plain){
            st.addClass('x-tab-panel-'+pos+'-plain');
        }

        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);
    },