[4.0.2a] Overwrite: Ext.tab.Bar onClose jump to previous Tab

[Nickname]

Hi

When I use Ext.tab.Panel and close one of multiple Tabs, it always focus the first Tab in the tabbar instead of the previous Tab. So I used Ext.overwrite and if I now close a tab with the close icon the previous focused Tab is than set as active tab, instead of the first in the tabbar.

Maybe there is a better and smarter way to implement this behavior. Optimizations welcome!

Ext.override(Ext.tab.Bar, {
    /**
     * @private
     * Marks the given tab as active
     * @param {Ext.Tab} tab The tab to mark active
     */
    setActiveTab: function(tab) {
        if (tab.disabled) {
            return;
        }
        var me = this;
        if (me.activeTab) {
            me.previousTab = me.activeTab;  // new line
            me.activeTab.deactivate();
        }
        tab.activate();

        if (me.rendered) {
            me.layout.layout();
            tab.el.scrollIntoView(me.layout.getRenderTarget());
        }
        me.activeTab = tab;
        me.fireEvent('change', me, tab, tab.card);
    },

    /**
     * @private
     * Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
     * @param {Ext.Tab} tab The tab to close
     */
    closeTab: function(tab) {
        var me = this,
            card = tab.card,
            tabPanel = me.tabPanel,
            nextTab;
            
        if (card && card.fireEvent('beforeclose', card) === false) {
            return false;
        }

        if (tab.active && me.items.getCount() > 1) {
//            nextTab = tab.next('tab') || me.items.items[0]; // old line
            nextTab = me.previousTab || tab.next('tab') || me.items.items[0]; // new line
            me.setActiveTab(nextTab);
            if (tabPanel) {
                tabPanel.setActiveTab(nextTab.card);
            }
        }
        /*
         * force the close event to fire. By the time this function returns,
         * the tab is already destroyed and all listeners have been purged
         * so the tab can't fire itself.
         */
        tab.fireClose();
        me.remove(tab);

        if (tabPanel && card) {
            card.fireEvent('close', card);
            tabPanel.remove(card);
        }
        
        if (nextTab) {
            nextTab.focus();
        }
    }
}); 

(my changes are red bold)

Edit: Colors in PHP Tags do not work, so added comments in code (1 new line, 1 modifed line)

[mitchellsimoens]

Edit: Colors in PHP Tags do not work, so added comments in code (1 new line, 1 modifed line)

Colors work in CODE tags

Nice work, this has been an improvement reported so it will probably make it into the framework soon or later

[EZboy]

It seems like this made into 4.1.0 b2, but it absolutely does not work.

How to repeat: use "Advances Tabs" example, add couple of closeable tabs using the button provided, close them one by one. Note: "Tab 1" will be active after every time you close another tab

Here is something i came up with:

This will focus the tabs in order they were opened. I tested the code with 4.1.0b2, not sure if it will work with 4.0.X

Ext.override(Ext.tab.Bar, { 


        setActiveTab: function(tab) {
        if (tab.disabled) {
            return;
        }
        var me = this;
        if (me.activeTab) {
            // me.previousTab = me.activeTab; //changed here
            me.activeTab.deactivate();
        }
        console.log('activating tab:');
        console.log(tab);
        tab.activate();

        me.activeTab = tab;
        me.fireEvent('change', me, tab, tab.card);
    },
    
    onAdd: function(tab) {
        var me = this;
        me.previousTab = tab;//added here
        tab.position = this.dock;
        this.callParent(arguments);
    },
    
    onRemove: function(tab) {
        var me = this;
        
        if (tab === me.previousTab) {
            //me.previousTab = null; //changed here
            me.previousTab = me.items.last();//added here
        }
        
        if (tab === me.activeTab) {
            me.activeTab = null;
        }
        
        if (me.items.getCount() === 0) {
            me.activeTab = null;
        }
        me.callParent(arguments);    
    }
    
});