New Example – How To Dynamically Add Tabs To TabPanel | Saki's Blog

New Example – How To Dynamically Add Tabs To TabPanel

13. March 2009 – 14:55

This example shows how to easily add tabs to a TabPanel without any layout issues of the newly added tab.

http://examples.extjs.eu

Enjoy!

StumbleUpon Toolbar

2 Responses to “New Example – How To Dynamically Add Tabs To TabPanel”
I hoped that adding simple logic to rename or delete a tab would just work to extend this example. However if you add logic to remove all tabs, then once new tabs are added back in they will show up but nothing will appear in the contents. Also renaming a tab will not work.

The solution is to add deferredRender : false to the tabpanel config.

Test cases – add these to the toolbar:

{
text:"Remove all tabs"
,handler:function() {
var tp = win.items.itemAt(0);
var tab = tp.removeAll();
}
and
{
text:"Rename 2nd tab"
,handler:function() {
var tp = win.items.itemAt(0);
var tpItem = tp.items.itemAt(1);
alert("current title=" + tpItem.title);
tpItem.title = "RENAMED";
tp.doLayout(false,true);
}

By LeslieM on Feb 1, 2010
Correction! Turns out my issues were all due to bugs in Ext 3.0.3. Ext 3.1.0 works fine without requiring deferredRender : false.

There was a bug in my previous logic, too:

tpItem.title = “RENAMED”;
–>
tpItem.setTitle(”RENAMED”);

By LeslieM on Feb 2, 2010