Question

我正在以编程方式创建新的ExtJs tabpanels并在其中渲染面板。面板（在选项卡内部呈现）都是用单独的JS文件编写的。

打开，渲染和关闭标签页完全正常。但是当我调试代码时，我发现已关闭的选项卡的先前组件仍然在内存中处于活动状态。因此，当重新打开选项卡时，组件的功能会受到影响。

我想销毁选项卡面板内的所有组件（如果由于某些原因，ExtJs无法执行此操作）。

我该怎么做？

以下是我正在尝试的示例代码：

主标签：

var tabs = new Ext.TabPanel({
    id : 'screensTabPanel',
    layout : 'fit',
    enableTabScroll : true,
    height : Ext.getBody().getStyleSize().height - 60,
    activeTab : 0,
    //enableTabScroll : true,
    autoScroll : true,
    autoRender : true,
    border : false,
    plugins : [ {
        ptype : 'tabscrollermenu',
        maxText : 30,
        pageSize : 5
    } ]
});

动态标签对象：

var tabConfig = {
            title : text,
            bodyPadding : 3,
            closeAction:'destroy',
            autoScroll : true,
            id : 'tab' + id,
            closable : closable,
            loader : {
                loadMask : 'loading...',
                autoLoad : true,
                url : url,
                scripts : true,
                params : {
                    userId : 1
                },
            border : false,
            appId : appIdx,
            screenId : screenId,
            gridType : gridType,
            listeners : {
                beforeclose : function(tab) {
                    debugger;
                    tab.removeAll(); //I tried doing this
                    tab.destroy(); //I tried doing this as well
                    return true;
                }
            }
        };

内部面板代码：

Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.panel.Panel',
itemId: 'qb-VisualSQLQueryBuilderId',
renderTo: Ext.Element.get('divQueryBuilder'),
layout: {
    type: 'border'
},
listeners:{
    beforerender: function(thisa, eOpts ){
        debugger;
        /*if(Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length > 1){
            Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[0].destroy();
        }*/
        Tab.MainTab = Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length - 1];
    }
},
items: [ .... screen components ... ]
});

将Panel对象添加到选项卡：

addedTab = ExtCont.add(tabConfig);
addedTab.show();
ExtCont.setActiveTab(addedTab);

现在发生了这样的事情：

打开标签（名称 - 查询构建器）
代码到达beforerender听众。
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")里面只有一个对象。
一切正常。

现在问题开始了

关闭标签
代码到达beforeclose监听器。尝试tab.removeAll（）和tab.destroy（）
重新打开标签 - 查询构建器
代码到达beforerender听众。
现在Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")里面有两个对象。所以它保留了第一次打开的标签的对象。第二个是刚才开放的标签。

如何确保关闭标签时所有组件都能顺利销毁？

Answer 1

来自TabPanel：

注意：默认情况下，选项卡的关闭工具会破坏子选项卡Component及其所有后代。这使得子选项卡组件及其所有后代都无法使用。要启用选项卡的重用，请使用autoDestroy配置TabPanel：false。

所以它可能真的是一个ExtJS Bug，因为autoDestroy: true是默认的。也许你可以开票。

ExtJs 4.1：在关闭动态创建的选项卡时销毁组件

1 个答案: