Extjs, как удалить содержимое панели вкладок

Question

Я хочу уничтожить содержимое панели вкладок, потому что когда я снова открываю панель, она остается прежним содержимым.поэтому он показывает 2 одинаковых содержимого.

Итак, я хочу поместить код для уничтожения содержимого панелей вкладок в обработчик события beforeclose.

* но это не работает.

Может кто-нибудь помочь?

источник:

Область ManuBar (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

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);
    }
}

и Content (test2.php) (загружается с использованием автозагрузки и скриптов: 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);

Я думаю, что предмет успешно удален.но все равно когда закроете и снова откройте вкладку.он показывает 2 одинаковых содержимого.

Моя вторая панель Моя вторая панель

Я не знаю, что не так ....

--- Обновлено ---

Я изменил файл test2.php следующим образом

var tab = Ext.getCmp('tab_menuManagement');
tab.removeAll(); // I added
tab.add(app);
tab.doLayout();

, тогда он работает.это странно.перед закрытием именно он был удален.но как оно снова живо .... ??кто-нибудь помочь ??

Спасибо!

Answer 1

попробуйте

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

Примечание:

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

Answer 2

Вы используете некоторые плохие практики. Например:

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

это позволит variable остаться в живых, поскольку существует неуправляемое событие (неуправляемое Ext, поскольку оно управляется вами). Если вы вручную прослушиваете событие, вы должны удалить его перед уничтожением variable. Или, если вы похожи на меня (ленивый :-), просто используйте this.mon.

Еще одна плохая вещь - Ext.getCmp (и id) - ее следует использовать только для целей отладки, а не для разработки. Когда я начинал с Ext, я использовал идентификаторы, и у меня были очень странные проблемы с TabPanel, когда я создавал их несколько экземпляров.