-
Try this
Code:
Ext.onReady(function(){
var tab = Ext.create('Ext.tab.Panel', {
renderTo : Ext.getBody(),
width: 300,
height: 200,
id: 'tabpanel',
activeTab: 0,
items: [{
title: 'Tab 1',
bodyPadding: 10,
closable: true,
html : 'A simple tab',
id: 'tab1'
}],
listeners: {
render: function(tabs){
tabs.getTabBar().add({
xtype: 'button',
text: '+',
handler: function(){
var tab = tabs.add({
title: 'Tab'+ (tabs.items.length + 1),
closable: true,
html: 'New tab',
listeners : {
close: function (tab) {
if(tab == tabs.getActiveTab()){
Ext.defer(function(){
var len = tabs.items.length-1;
tabs.setActiveTab(len);
}, 1);
}
}
}
});
tabs.setActiveTab(tab);
}
});
}
}
});
});
-
thanks vietits ,
but by this code , if i have tab1 + button , i click on + twice i have tab1 tab2 tab3 + button , my active tab now is tab3 and i close it , so tab2 should be active tab , ,but in above solution tab1 is active tab.
Here are final summary of tests it must pass through:
-- Click Button twice: Tab1, Tab2, Tab3 with Tab3 is active.
- Close Tab3: Tab2 becomes active, not Tab1.
- if + button clicked twice order is tab1 tab2 tab3 + , and if i manually click on tab1 and set it as active tab and without clicking on tab3 (not setting it as active tab ) close it then tab1 must be activated and not tab2.