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

});