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

Question

我正在以编程方式创建新的 ExtJs 选项卡面板并在其中呈现面板。 面板（在选项卡内呈现）都写在单独的 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);

现在是这样的：

1. 打开选项卡（名称 - 查询生成器）
2. 代码到达beforerender 监听器。
3. Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") 里面只有一个对象。
4. 一切正常。

问题开始了

1. 关闭标签
2. 代码到达beforeclose 监听器。尝试 tab.removeAll() 和 tab.destroy()
3. 重新打开选项卡 - 查询生成器
4. 代码到达beforerender监听器。
5. 现在Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") 里面有两个对象。所以它保留了第一次打开的选项卡的对象。第二个是刚才打开的标签页。

如何确保每次关闭选项卡时其所有组件都能顺利销毁？

Answer 1

来自TabPanel：

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

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