Extjs，如何删除选项卡面板的内容

Question

我想销毁选项卡面板的内容，因为当我再次打开面板时，它仍然保留之前的内容。所以它显示2个相同的内容。

所以我想将销毁选项卡面板内容的代码放入 beforeclose 事件处理程序中。

我尝试这样做，

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

但它不起作用。

有人可以帮忙吗？

来源：

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

和内容(test2.php)(它使用autoLoad和脚本加载：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 管理，因为它由您管理）。如果您手动监听事件，则必须在销毁变量之前将其卸载。或者，如果您像我一样（懒惰:-)，只需使用 this.mon 即可。

另一个不好的事情是Ext.getCmp（和id）——它应该仅用于调试目的，而不是用于开发。当我开始使用 Ext 时，我使用了 ids，当我创建 TabPanel 的多个实例时，我遇到了非常奇怪的问题。