View Full Version : Replace TabPanel card with new component?

14 Jan 2011, 3:02 PM
So this seems like it should be simple. I need to replace a TabPanel's card each time with new data. Tried several things including doing a TabPanel.items.replace(). The component is replaced in the items but it seems the TabPanel doesn't recognize it. Looked for a TabPanel.replace() method but one doesn't exist. There are add, insert, and remove methods. Tried a remove + insert and that removes the tab.

Any ideas?

14 Jan 2011, 3:08 PM
According to the TabPanel docs:

If the Container is already rendered when add is called, you may need to call doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once.

Have you tried calling tabpanel.doLayout() after making your changes?

13 Sep 2011, 10:30 AM

I'm running into the exact same problem on ExtJS 4.0.6. And I did call doLayout() after calling replace, but I can't see the tab getting replaced.

Here's my code:

replace: function(key, newTab) {
this.items.replace(key, newTab);

this is just a function in my tabPanel that I want to call every time I need to replace a specific tab.

What's strange is that when I use firebug, after the replace but before the doLayout, this.items.getByKey(key) has the newTab that I passed on to the function so the object was indeed replaced on the collection. But when I do a doLayout it does not render. Looks like calling doLayout is not really doing anything...

Did you figure out what was happening ? Did you solve the problem ?



14 Sep 2011, 2:31 AM

I managed to find a way to replace the tab: I just created the following function on my class that extends Ext.tab.Panel:

* Replaces a tab in the main tab area with another tab
* @param {Number} index The index of the tab that is to be replaced in the items collection
* @param {Object} newTab The new object (tipically a panel or a subclass) that is to replace the home tab
replaceTab: function(index, newTab) {
var oldTab = this.items.get(index);
if (oldTab)
this.insert(index, newTab);
this.remove(oldTab, true);

Works as long as the new tab does not have the same id as the one being replaced, or as an existing one (in my case this is ok, but it might not be so for everyone)...