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

      0  

    Default Add new tab button in tab strip

    Add new tab button in tab strip


    Usage:

    Code:
            plugins: [ Ext.ux.AddTabButton ],
            createTab: function() { // Optional function which the plugin uses to create new tabs
                return {
                    title: 'New Tab',
                    closable: true
                };
            },
    Obviously it just creates a new defaultType (whatever you configure that to for your TabPanel - defaults to Ext.Panel). It's up to you to access the newly added item and manipulate it.

    Code:
    Ext.ux.AddTabButton = (function() {
        function onTabPanelRender() {
            this.addTab = this.itemTpl.insertBefore(this.edge, {
                id: this.id + 'addTabButton',
                cls: 'add-tab',
                text: this.addTabText || '&#160',
                iconCls: ''
            }, true);
            this.addTab.child('em.x-tab-left').setStyle('padding-right', '6px');
            this.addTab.child('a.x-tab-right').setStyle('padding-left', '6px');
            new Ext.ToolTip({
                target: this.addTab,
                bodyCfg: {
                    html: 'Add new tab'
                }
            });
            this.addTab.on({
                mousedown: stopEvent,
                click: onAddTabClick,
                scope: this
            });
        }
    
        function createScrollers() {
            this.scrollerWidth = (this.scrollRightWidth = this.scrollRight.getWidth()) + this.scrollLeft.getWidth();
        }
    
        function autoScrollTabs() {
            var scrollersVisible = (this.scrollLeft && this.scrollLeft.isVisible()),
                pos = this.tabPosition == 'top' ? 'header' : 'footer';
            if (scrollersVisible) {
                if (this.addTab.dom.parentNode === this.strip.dom) {
                    if (this.addTabWrap) {
                        this.addTabWrap.show();
                    } else {
                        this.addTabWrap = this[pos].createChild({
                            cls: 'x-tab-strip-wrap',
                            style: {
                                position: 'absolute',
                                right: (this.scrollRightWidth + 1) + 'px',
                                top: 0,
                                width: '30px',
                                margin: 0
                            }, cn: {
                                tag: 'ul',
                                cls: 'x-tab-strip x-tab-strip-' + this.tabPosition,
                                style: {
                                    width: 'auto'
                                }
                            }
                        });
                        this.addTabWrap.setVisibilityMode(Ext.Element.DISPLAY);
                        this.addTabUl = this.addTabWrap.child('ul');
                    }
                    this.addTabUl.dom.appendChild(this.addTab.dom);
                    this.addTab.setStyle('float', 'none');
                }
                this.stripWrap.setWidth(this[pos].getWidth(true) - (this.scrollerWidth + 31));
                this.stripWrap.setStyle('margin-right', (this.scrollRightWidth + 31) + 'px');
            } else {
    //          
                if ((this.addTab.dom.parentNode !== this.strip.dom)) {
                    var notEnoughSpace = (((this[pos].getWidth(true) - this.edge.getOffsetsTo(this.stripWrap)[0])) < 33)
                    this.addTabWrap.hide();
                    this.addTab.setStyle('float', '');
                    this.strip.dom.insertBefore(this.addTab.dom, this.edge.dom);
                    this.stripWrap.setWidth(this.stripWrap.getWidth() + 31);
                    if (notEnoughSpace) {
                        this.autoScrollTabs();
                    }
                }
            }
        }
    
        function autoSizeTabs() {
            this.addTab.child('.x-tab-strip-inner').setStyle('width', '14px');
        }
    
        function stopEvent(e) {
            e.stopEvent();
        }
    
        function onAddTabClick() {
            this.setActiveTab(this.add(this.createTab? this.createTab() : {
                title: 'New Tab'
            }));
        }
    
        return {
            init: function(tp) {
                if (tp instanceof Ext.TabPanel) {
                    tp.onRender = tp.onRender.createSequence(onTabPanelRender);
                    tp.createScrollers = tp.createScrollers.createSequence(createScrollers);
                    tp.autoScrollTabs = tp.autoScrollTabs.createSequence(autoScrollTabs);
                    tp.autoSizeTabs = tp.autoSizeTabs.createSequence(autoSizeTabs);
                }
            }
        };
    })();

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    excellent dude.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    thank you, thats sooo cool, but how can i use iconCls: 'add' ?

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

      0  

    Default


    OK, now you can configure your TabPabel with

    Code:
        addTabText: '+'
    To use text in the add tab button.

    Or, use the class to give it an icon eg

    Code:
        div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
            background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
        }
    To give


  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    16
    Vote Rating
    0
    jocampo is on a distinguished road

      0  

    Default


    Hi Animal,

    There is a way to add buttons with right aligment, independent of the aligment of the tabs. I mean, all the tabs would be with left aligment and the new tab buttons with right aligment??

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    Animal, very nice

    The tab was very narrow so I changed the css to:

    HTML Code:
    div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
        width:26px;
        background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
    }
    Thanks, Marty

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    61
    Vote Rating
    0
    jeroenooms is on a distinguished road

      0  

    Default


    Hi Animal,

    this is great. I would like to replicate the example from the screenshot you posted, however, there is a small rendering problem now. I'm using ext 3.2.1. I can display the whole icon by setting a higher width in css, but there is still something weird going on between the tabs and the '+' button. Could you maybe take a quick look? Other than that, fantastic work!

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

      0  

    Default


    Poke it with Firebug and see what styles it needs.

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    61
    Vote Rating
    0
    jeroenooms is on a distinguished road

      0  

    Default


    Ah I just found out that it is not because of the ext version but because of the tabPosition: 'bottom'.

  10. #10
    Sencha User
    Join Date
    Jan 2009
    Location
    Manchester, UK
    Posts
    21
    Vote Rating
    0
    ody is on a distinguished road

      0  

    Default


    Cheers Animal!

    I've cut down what you done as I just needed the button to allow someone to click it which calls a callback function that adds a new tab to the tabpanel. I think it is correct ..

    PHP Code:
    Ext.ux.AddTabButton = (function() {
        function 
    onTabPanelRender() {
            
    this.addTab this.itemTpl.insertBefore(this.edge, {
                
    idthis.id 'addTabButton',
                
    cls'add-tab',
                
    textthis.addTabText || ' ',
                
    iconCls''
            
    }, true);
            
    this.addTab.child('em.x-tab-left').setStyle('padding-right''6px');
            
    this.addTab.child('a.x-tab-right').setStyle('padding-left''6px');
            new 
    Ext.ToolTip({
                
    targetthis.addTab,
                
    bodyCfg: {
                    
    html'New tab'
                
    }
            });
            
    this.addTab.on({
                
    clickthis.onAddTabClick,
                
    scopethis
            
    });
        }

        return {
            
    init: function(tp) {
                if (
    tp instanceof Ext.TabPanel) {
                    
    tp.onRender tp.onRender.createSequence(onTabPanelRender);
                }
            }
        };
    })(); 
    Which uses the config options in the tabpanel:

    PHP Code:
    plugins: [ Ext.ux.AddTabButton ],
    onAddTabClick : function(){ someFunctionThatAddsNewTab(); } 

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