[Solved] Increase TabStrip size ?

[ritesh.kapse]

Hi,

I am trying to increase tabStrip height and align the icon and the title text to center.

I tried overriding css as :-

#tab_panel_id .x-tab-strip span.x-tab-strip-text {
    color:#416AA3;
    cursor:pointer;
    font-family:tahoma,arial,helvetica;
    font-size:11px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    height:20px; //height added
    line-height:normal;
    padding:4px 0pt;
    white-space:nowrap;
}

But this increase all tabstrip size of all tab panels.

I am having tabpanel nested in the tab panel whose tab strip need be increased.

Its my 100th post. Please help

[ritesh.kapse]

/*
* Override to set Tab Strip Size
*/
Ext.TabPanel.override({

    tabStripInnerStyle : '',    
    
    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}});
        this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'});
        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 style="{tabStripInnerStyle}" class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>', 
                 '</em></a></li>'
            );// *** changed
            tt.disableFormats = true;
            tt.compile();
            Ext.TabPanel.prototype.itemTpl = tt;
        }

        this.items.each(this.initTab, this);
    },
    
    // 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 || '',
            tabStripInnerStyle : this.tabStripInnerStyle // *** added
        };
        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.on('disable', this.onItemDisabled, this);
        item.on('enable', this.onItemEnabled, this);
        item.on('titlechange', this.onItemTitleChanged, this);
        item.on('beforeshow', this.onBeforeShowItem, this);
    }
        
});

Hope this helps someone

[imrukhan81@yahoo.co.in]

Hi
Can you please give an example to implement this?
Thanks.

[ldashevskiy]

ritesh.kapse, thanks, I got inspired by your code and modified the corresponding code in ExtJS 3.4 to get the tab text to be centered:

/*
* Override to set Tab titles centered (can do any other customizations here)
*/
Ext.TabPanel.override({


tabStripInnerStyle : 'text-align: center;',


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




this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: ' '}]});
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"></a>',
'<a class="x-tab-right" href="#"><em class="x-tab-left">',
'<span style="{tabStripInnerStyle}" 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);
},


initTab : function(item, index){
var before = this.strip.dom.childNodes[index],
p = this.getTemplateArgs(item);
p.tabStripInnerStyle = this.tabStripInnerStyle;
var 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;




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


});


Sorry, I'm not sure how to make the code get formatted nicely ...