Results 1 to 6 of 6

Thread: Ext.ux.AddTabButton Add new tab button in tab strip

  1. #1

    Default Ext.ux.AddTabButton Add new tab button in tab strip

    Adds a new tab button to the tabstrip.
    Similar to http://www.sencha.com/forum/showthre...n-in-tab-strip

    Button changes to a toolbar when overflow is reached.

    Code:
    Ext.define('Ext.ux.AddTabButton', {    alias: 'plugin.AddTabButton',
    
    
        mixins: {
            observable: 'Ext.util.Observable'
        },
    
    
        onAddTabClick: function() {        
            this.tabPanel.createTab();
        },
        
        showButton: function(ownerContext){        
            this.button.hide();
            this.toolbar.show();
        },
        
        hideButton: function(ownerContext){
            this.button.show();
            this.toolbar.hide();
        },
    
    
        init: function(tabPanel) {        
            this.tabPanel = tabPanel;
            
            if (tabPanel instanceof Ext.TabPanel) {
                
                this.bar = this.tabPanel.getTabBar();
                
                //create button after tab
                this.button = this.bar.add({
                    xtype: 'button',
                    iconCls: 'add-tab',
                    handler: this.onAddTabClick,
                    scope: this
                });
                
                //create toolbar
                this.bar.flex = 1;
                if(this.bar.plain){
                    this.bar.on({
                        resize: function(){
                            this.bar.setUI(this.ui + '-plain');
                        }
                    });
                }
        
                this.tabPanel.removeDocked(this.bar, false);
                var items = this.tabPanel.addDocked({
                    xtype: 'toolbar',
                    dock : this.bar.dock || 'top',
                    items: [this.bar].concat([{
                        xtype: 'button',
                        iconCls: 'add-tab',
                        handler: this.onAddTabClick,
                        scope: this,
                        hidden: true
                    }])
                });
                
                this.toolbar = items[0].items.items[1];
                
                var me = this;
                
                me.tabPanel = tabPanel;
                tabPanel.on({
                    render: function() {
                        me.tabBar = tabPanel.tabBar;
                        me.layout = me.tabBar.layout;
                        me.layout.overflowHandler.handleOverflow = Ext.Function.createSequence(me.layout.overflowHandler.handleOverflow, me.showButton, me);
                        me.layout.overflowHandler.clearOverflow = Ext.Function.createSequence(me.layout.overflowHandler.clearOverflow, me.hideButton, me);
                    },
                    destroy: me.destroy,
                    scope: me,
                    single: true
                });
            }
        }
    });
    CSS:
    Code:
        .add-tab {
            background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
        }
    Usage:

    Code:
    Ext.onReady(function(){    var panel = new Ext.TabPanel({
            renderTo: Ext.getBody(),
            plugins: [Ext.create('Ext.ux.AddTabButton')],
            width: 500,
            height: 300,
            activeItem: 0,
            items: [{
                title: 'item 1'
            }, {
                title: 'item 2',
                closable: true
            }, {
                title: 'item 3',
                closable: true
            }],
        createTab: function () { // Optional function which the plugin uses to create new tabs
            //code to add tab
        }
        });
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Thank you for the contribution.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    20

    Default Tab not showing properly!

    Hello,
    Thanks for sharing the code.

    But when I click on (+) button, I see a new tab, but nothing really show's up!

    Here's my code!
    Code:
    Ext.define('Ext.app.AddTabButton', {    
        
        alias: 'plugin.AddTabButton',
        
        onTabPanelRender: function() {
            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
            });
        },
        
        createScrollers: function() {
            this.scrollerWidth = (this.scrollRightWidth = this.scrollRight.getWidth()) + this.scrollLeft.getWidth();
        },
    
        mixins: {
            observable: 'Ext.util.Observable'
        },
        
        autoScrollTabs: function() {
            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();
                    }
                }
            }
        },
    
        autoSizeTabs: function() {
            this.addTab.child('.x-tab-strip-inner').setStyle('width', '14px');
        },
    
        stopEvent: function(e) {
            e.stopEvent();
        },
    
    
        /*onAddTabClick: function() {        
            this.bar.add(this.tabPanel.createTab());
        },*/
        
        onAddTabClick: function() {        
            this.bar.add(this.tabPanel.createTab());
        },
        
        /*onAddTabClick: function() {
            this.setActiveTab(this.bar.add(this.createTab? this.createTab() : {
                title: 'New Tab'
            }));
        },*/
        
        
        showButton: function(ownerContext){        
            this.button.hide();
            this.toolbar.show();
        },
        
        hideButton: function(ownerContext){
            this.button.show();
            this.toolbar.hide();
        },
    
    
        init: function(tabPanel) {        
            this.tabPanel = tabPanel;
            
            if (tabPanel instanceof Ext.TabPanel) {
                
                this.bar = this.tabPanel.getTabBar();
                
                //create button after tab
                this.button = this.bar.add({
                    xtype: 'button',
                    iconCls: 'add-tab',
                    handler: this.onAddTabClick,
                    scope: this
                });
                
                //create toolbar
                this.bar.flex = 1;
                if(this.bar.plain){
                    this.bar.on({
                        resize: function(){
                            this.bar.setUI(this.ui + '-plain');
                        }
                    });
                }
        
                this.tabPanel.removeDocked(this.bar, false);
                var items = this.tabPanel.addDocked({
                    xtype: 'toolbar',
                    dock : this.bar.dock || 'top',
                    items: [this.bar].concat([{
                        xtype: 'button',
                        iconCls: 'add-tab',
                        handler: this.onAddTabClick,
                        scope: this,
                        hidden: true
                    }])
                });
                
                this.toolbar = items[0].items.items[1];
                
                var me = this;
                
                me.tabPanel = tabPanel;
                tabPanel.on({
                    render: function() {
                        me.tabBar = tabPanel.tabBar;
                        me.layout = me.tabBar.layout;
                        me.layout.overflowHandler.handleOverflow = Ext.Function.createSequence(me.layout.overflowHandler.handleOverflow, me.showButton, me);
                        me.layout.overflowHandler.clearOverflow = Ext.Function.createSequence(me.layout.overflowHandler.clearOverflow, me.hideButton, me);
                    },
                    destroy: me.destroy,
                    scope: me,
                    single: true
                });
            }
        }
    });
    Code:
    Ext.onReady(function(){    
            var panel = new Ext.TabPanel({
            renderTo: Ext.getBody(),
            plugins: [Ext.create('Ext.app.AddTabButton')],
            createTab: function() {
                console.log("called");
                return {
                    title: 'New Tab',
                    closable: true
                };
            },
            width: 500,
            height: 300,
            activeItem: 0,
            items: [{
                title: 'item 1'
            }, {
                title: 'item 2',
                closable: true
            }, {
                title: 'item 3',
                closable: true
            }]
        });
    });
    extImage.jpg
    What am I missing here?
    Thanks!

  4. #4

    Default

    I've added the createTab option to the example.
    Also this was tested in Ext 4.2.0

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    20

    Default

    Thanks but I ended up using another approach.

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    84

    Default

    here is my take of a simplified version of this plugin AddTabButton
    |:| GaiaEHR |:| A Open Source Software for Electronic Health Records - Lead Developer

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •