How to re-add a removed tab in extjs

1
votes

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?

2
javascriptextjsextjs4.1extjs3extjs4.2
What is tab here, and are you sure it is what you think it is at the time you call tabPanel.add? – Chris Farmer
@ChrisFarmer tab is a Ext.panel.Panel. There is no reason for it to change, at least in my code. – Isaac
Have you tried remove with the autoDestroy param specifically set to false? Surely you're not really trying to re-add an actual Panel, because you wouldn't get that error if that were true, right? – Chris Farmer
really confusing question, needs more code. – dbrin
@ChrisFarmer setting autoDestroy to false did the trick. Thanks! If you'd like to add an answer. – Isaac

2 Answers

3
votes

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);
0
votes

Try something like this :

var currentTab = null;
function addMyTab(tab) {
    var me = this;
    if (tab) { // use most recently added tab
        currentTab = tab;
    } 
    var tabPanel = Ext.ComponentQuery.query(..);
    tabPanel.removeAll();
    tabPanel.add(currentTab );
}

currentTab is a global variable . If you pass a new tab to update the current tab , replace the current tab with the new tab it , otherwise use the current tab as it is. Make sure that before using currentTab the first time , to initialize it with some tab.