1. #1
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Thumbs up [Solved] Increase TabStrip size ?

    [Solved] Increase TabStrip size ?


    Hi,

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

    I tried overriding css as :-
    Code:
    #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

  2. #2
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Thumbs up Done :)

    Done :)


    Code:
    /*
    * 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

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    14
    Vote Rating
    0
    imrukhan81@yahoo.co.in is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default


    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 ...