Hybrid View

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar