Add new tab button in tab strip

[Animal]

Usage:

        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.

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

[jay@moduscreate.com]

excellent dude.

[Richie1985]

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

[Animal]

OK, now you can configure your TabPabel with

    addTabText: '+'

To use text in the add tab button.

Or, use the class to give it an icon eg

    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

[jocampo]

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

[moegal]

Animal, very nice

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

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

[jeroenooms]

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!

[Animal]

Poke it with Firebug and see what styles it needs.

[jeroenooms]

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

[ody]

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

Ext.ux.AddTabButton = (function() {
    function onTabPanelRender() {
        this.addTab = this.itemTpl.insertBefore(this.edge, {
            id: this.id + 'addTabButton',
            cls: 'add-tab',
            text: this.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({
            target: this.addTab,
            bodyCfg: {
                html: 'New tab'
            }
        });
        this.addTab.on({
            click: this.onAddTabClick,
            scope: this
        });
    }

    return {
        init: function(tp) {
            if (tp instanceof Ext.TabPanel) {
                tp.onRender = tp.onRender.createSequence(onTabPanelRender);
            }
        }
    };
})(); 

Which uses the config options in the tabpanel:

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