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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi