Question

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('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!

Answer 1

try to

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

Note:

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