1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

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

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


    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.

    Code:
    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');
    });

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This fixes it for me:

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