Extjs, How to remove tab panel's content

I want to destroy the tab panel's content because when I open the panel again, it remains the before contents. so it show 2 same content.

So I want to put the code to destroy tab panels content into beforeclose event handler.

and I tried like this,

tempTab.on('beforeclose',function(obj){
        this.items.each(function(c){this.remove(c)});
});

but it does not work.

Can anyone help?

source :

ManuBar Area (MENU)

menubar.add({
    text : 'Administrator',
    iconCls : 'plugin',
    menu : {
    items : [
        {
        text : 'Menu Management',
        id : 'menuManagement',
        iconCls : 'tabs',
        url : 'main/test2',
        handler : onMenuClick
        },{
        text : 'User Management',
        id : 'useManagement',
        iconCls: 'user',
        url : 'main/test',
        handler : onMenuClick
        }]
    }
})

Manu Handler

function onMenuClick(item) {

    if(!Ext.getCmp('tab_'+item.id)){
    var tempTab = Ext.getCmp('mainTabPanel').add({
        id : 'tab_'+item.id,
        margins : '0 5 5 0',
        deferredRender : false,
        closable : true,
        title : item.text,
        plain : true, //
        defaults : {autoScroll : true},
        autoLoad : {
        url : '/ext/main/test2/',
        scripts : true
        },
        listeners : {
        'beforeclose' : function(){
            alert(this.items.get(0).id); // output : testPanel
            this.removeAll();
                alert(this.items.get(0).id); // output : undefined
        }
        }
    });

    tempTab.on('beforeclose',function(){
        //console.log(this);
        this.removeAll(); ////////////////////////////////////
    });
    Ext.getCmp('mainTabPanel').setActiveTab(tempTab);

    }else {
    var tempTab = Ext.getCmp('tab_'+item.id);
    Ext.getCmp('mainTabPanel').setActiveTab(tempTab);
    }
}

and Content(test2.php) (it load using autoLoad and scripts :true)

test = function(){
return {
    init : function() {
    Ext.QuickTips.init();
    var app = new Ext.Panel({
        id : 'testPanel',
        html : 'My Second Panel'
    });

    var tab = Ext.getCmp('tab_menuManagement');
    //app.relayEvents(tab, ['activate', 'deactivate', 'beforeclose']);
    tab.add(app);
    tab.doLayout();

    tab = null; app = null;
    }
}
}();


Ext.onReady(test.init, test, true);

I think the item removed successfully. but still when close and open the tab again. it show 2 same contents.

My Second Panel My Second Panel

I don't know what is wrong....

---Updated ---

I changed the test2.php file like this

var tab = Ext.getCmp('开发者_Go百科tab_menuManagement');
tab.removeAll(); // I added
tab.add(app);
tab.doLayout();

then it works. it's weird. before close exactly it was removed. but How it alive again....?? anybody help??

Thanks!

try to

tempTab.on('beforeclose',function(obj){
     this.removeAll();
});

Note:

removeAll( [Boolean autoDestroy] ) : Array
*Removes all components from this container*.

You are using some bad practices. For example:

variabile.on('event', handler, scope)

this will let variable alive since there is an unmanaged event (unmanaged by Ext, since it's managed by you). If you manually listen to an event, you have to uninstall it before destroy variable. Or if you are like me (lazy :-) just use this.mon.

Another bad thing is Ext.getCmp (and id) -- it should be used only for debugging purposes, not for development. When I started with Ext I used ids and I had very weird issues with TabPanel when I created multiple instances of them.