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

【问题标题】：Extjs, How to remove tab panel's contentExtjs，如何删除选项卡面板的内容
【发布时间】：2011-09-30 14:30:55
【问题描述】：

我想销毁标签面板的内容，因为当我再次打开面板时，它仍然是之前的内容。所以它显示了 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
        }]
    }
})

手动处理程序

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)（它使用 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();

然后就可以了。有点奇怪。在完全关闭之前它被删除了。但是如何又活过来了……？？？有人帮忙吗？？

谢谢！

【问题讨论】：

标签： extjs

【解决方案1】：

尝试

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

注意：

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

【讨论】：

我找不到你在哪里触发 beforeclose 事件。
tempTab.on('beforeclose',function(){ //console.log(this); this.removeAll(); ////////////// /////////////////// });
我试过了，像这样，alert(this.items.get(0).id); //输出：testPanel this.removeAll();警报（this.items.get（0）.id）； // 输出：未定义。这意味着它被删除了。但是当我再次打开选项卡面板时，它会显示 2 个相同的内容。然后关闭再打开，它显示相同的3个内容....你知道哪里错了吗？

【解决方案2】：

您正在使用一些不良做法。例如：

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

这将使variable 活着，因为有一个非托管事件（由 Ext 托管，因为它是由您管理的）。如果你手动监听一个事件，你必须在销毁variable之前卸载它。或者，如果您像我一样（懒惰:-)，请使用this.mon。

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

【讨论】：