How to re-add a removed tab in extjs

Question

I want to add/remove a tab.

I am aware of add/remove methods. But my issue is that I want to re-add the same tab, again. The re-added tab is stored in memory. I want to be able to do something like this:

function addMyTab(tab) {
    var me = this;
    if (!tab) { // use most recently added tab
        tab = me.tab;
    } else { // update most recently added tab
        me.tab = tab;
    }

    var tabPanel = Ext.ComponentQuery.query(..);
    tabPanel.removeAll();
    tabPanel.add(me.tab);
}

This however doesnot work, it throws this error:

Uncaught TypeError: Cannot read property 'addCls' of null

An Extjs forum thread suggest that this is due to trying to add an already destroyed element.

How can re-use the tab?

Answer 1

Since you seem to be saying you're re-adding the same panel that you are removing, I'm guessing that the panel is being destroyed after the removal step. Something like this should work I think:

// initially add the panel
tabPanel.add(myPanel);

// remove it with autoDestroy set to false so Ext doesn't kill your panel
tabPanel.removeAll(false); 

// re-add the panel
tabPanel.add(myPanel);