Question

我想破坏标签面板的内容，因为当我再次打开面板时，它仍然是之前的内容。所以它显示了2个相同的内容。

所以我想把代码放到beforeclose事件处理程序中来删除标签面板内容。

我尝试过这样，

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

但它不起作用。

有人可以帮忙吗？

来源：

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

和内容（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管理，因为它由您管理）。如果您手动收听某个事件，则必须在销毁variable之前将其卸载。或者，如果你像我一样（懒惰:-)，只需使用this.mon。

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

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

2 个答案: