Replacing tabs in a tabpanel

[Chau]

Hi!

I have created a tabpanel with two tabs. I further more have a list, where the user can select one item from several. Depending on the selected item, I want to replace the two tabs with two other tabs. In this example, I then need 4 different tabs.

My idea was to initially create the 4 tabs, and then switch between them. But it seems like, when I remove the two current tabs, insert the two others, then remove the two new and insert the first two, the first two has been deleted (by the tabpanel.remove method).

Another idea was to create the tabs each time I need them, and this ofcourse ensures me that they are available. After switching tabs, the setActiveTab does select the right tab, but just renders white. After switching tabs twice, I get an Ext.fly(el) is null, and none of the tabs are visible.

My question is, is this the right approach and if so, what is it, that I am doing wrong?

Kind regards, Casper

Tabpanel:


var sourceTabPanel = new Ext.TabPanel({
autoTabs: true,
activeTab: 0,
region: 'center',
deferredRender: false,
id: 'sourceTabPanel',
border: false,
items: [{
title: 'Grunddata',
itemId: 'sourceTabBaseData',
items: Ext.getCmp('formSourceBaseDataLayout1')
}, {
title: 'Scenarie',
itemId: 'sourceTabScenario',
items: Ext.getCmp('formSourceScenarioDataLayout1')
}]
});
Tab creation:


function createSourceLayout1() {
var sourceBaseDataLayout1 = new Ext.FormPanel({
xtype: 'container',
layout: "fit",
id: 'formSourceBaseDataLayout1',
items: ...
});

var sourceScenarioDataLayout1 = new Ext.FormPanel({
xtype: 'container',
layout: "fit",
id: 'formSourceScenarioDataLayout1',
items: ...
});
}

function createSourceLayout2(){
var sourceBaseDataLayout2 = new Ext.FormPanel({
xtype: 'container',
layout: "fit",
id: 'formSourceBaseDataLayout2',
items: ...
});

var sourceScenarioDataLayout2 = new Ext.FormPanel({
xtype: 'container',
layout: "fit",
id: 'formSourceScenarioDataLayout2',
items: ...
});
}
Tab replacement:


function sourcesSelectSource(source)
{
var tabBaseData;
var tabScenario;

switch(source)
{
case "source1":
createSourceLayout1();
tabBaseData = Ext.getCmp('formSourceBaseDataLayout1');
tabScenario = Ext.getCmp('formSourceScenarioDataLayout1');
break;

case "source2":
createSourceLayout2();
tabBaseData = Ext.getCmp('formSourceBaseDataLayout2');
tabScenario = Ext.getCmp('formSourceScenarioDataLayout2');
break;

default:

break;
}

if(tabBaseData != null && tabScenario != null)
{
var tab = Ext.getCmp('sourceTabPanel');

// Determine the active tab number.
var currentActiveTab = tab.activeTab;

tab.removeAll();
tab.insert(0,
{
title: 'Grunddata',
itemId: 'sourceTabBaseData',
defferredRender: false,
items: tabBaseData
});

tab.insert(1,
{
title: 'Scenarie',
itemId: 'sourceTabScenario',
defferredRender: false,
items: tabScenario
});

tab.doLayout(false,true);
tab.setActiveTab(currentActiveTab);
}
}

[hendricd]

currentActiveTab has been destroyed by removeAll()

Pick a new one: :>


tab.doLayout(false,true);
tab.setActiveTab(tab.items.first());

[Chau]

currentActiveTab has been destroyed by removeAll()

Pick a new one: :>


tab.doLayout(false,true);
tab.setActiveTab(tab.items.first());


Thanks! Ofcourse you are right :">

But now I can see, that creating the tabs each time I select a new item, takes way too long time. Is there a method to store the tab contents, so that I can remove the tabs from the panel while preventing the removeAll() method from deleting the contents?

Regards Casper

[Chau]

Is there a method to store the tab contents, so that I can remove the tabs from the panel while preventing the removeAll() method from deleting the contents?

Was just thinking of Animal's RTFM, and took a dive into the documentation. tabpanel.removeAll([optional bool autodestroy]) tells me exactly what to do :">

/Casper

[Animal]

Woohoo!

Result!