Javascript ExtJS在关闭时隐藏选项卡,而不是删除

Javascript ExtJS在关闭时隐藏选项卡,而不是删除,javascript,extjs,Javascript,Extjs,我有以下代码在tabpanel中创建选项卡: id: 'tabs', region: 'center', xtype: 'tabpanel', autoDestroy: false, items:[{ xtype: 'country-rate-grid', id: 'LegalCompliance', title: 'Legal Compliance', store: 'RateManagement.store.LegalRateStore', hidde

我有以下代码在tabpanel中创建选项卡:

id: 'tabs',
region: 'center',
xtype: 'tabpanel',
autoDestroy: false,
items:[{
    xtype: 'country-rate-grid',
    id: 'LegalCompliance',
    title: 'Legal Compliance',
    store: 'RateManagement.store.LegalRateStore',
    hidden: true,
    closable: true,
    listeners: {
        'close': function(tab, eOpts) {
            tab.hide();
        }
    }
}
当我通过X按钮关闭选项卡,然后尝试通过
tabs.child('#'+record.data.id).tab.show()重新打开它时,我在控制台中遇到此错误:

未捕获的TypeError:无法读取null的属性“tab”

看起来它是在删除选项卡而不是隐藏它。当有人单击选项卡上的“关闭”按钮时,如何显示和隐藏选项卡而不是从DOM中删除它们?

引用:

注意:默认情况下,选项卡的关闭工具将销毁子选项卡组件及其所有子组件。这会使子选项卡组件及其所有子组件不可用。要启用选项卡的重复使用,请使用autoDestroy:false配置选项卡面板

编辑:好的,现在我想我明白你想做什么了,以及哪里出了问题。我查找了代码,它看起来像
autoDestroy:false
实际上并没有销毁容器的子级,但它将该子级从文档体中分离出来,并将其从容器的子级集合中删除。这就是为什么你会看到它从DOM中消失。但是,DOM节点不会丢失,而是附加到可通过
Ext.getDetachedBody()
获得的分离体元素。这也是为什么您不能通过调用
tabs.child(blah)
来引用组件的原因-选项卡已从那里删除

因此,如果您试图在关闭时隐藏选项卡面板,为了能够再次显示它,您必须将其重新插入选项卡面板:

Ext.onReady(function() {
    var tabs = Ext.create('Ext.tab.Panel', {
        renderTo: document.body,
        width: 300,
        height: 200,
        autoDestroy: false,
        items: [{
            id: 'foo',
            title: 'Foo',
            closable: true,
            html: 'foo bar'
        }, {
            id: 'bar',
            title: 'bar',
            closable: false,
            items: [{
                xtype: 'button',
                text: 'Bring foo back!',
                handler: function() {
                    var foo = Ext.getCmp('foo');

                    foo.ensureAttachedToBody();
                    tabs.insert(foo);
                }
            }]
        }]
    });
});

foo.ensureAttachedToBody()
将该面板的DOM节点重新附加到文档正文,然后我们将其插入选项卡面板,就像什么都没有发生一样。瞧。

我在面板中添加了
autoDestroy:false
,但它仍然给出了相同的错误。我用我的代码更新了这个问题。我用错了吗?是的;您需要在选项卡面板上放置
autoDestroy:false
,而不是它的子项。:)谢谢,但我在那里添加了它(并用我的代码更新了原始问题),但它仍然给出了相同的结果。基本上,它是说
tabs.child(“#”+record.data.id)
为空。
console.log(record.data.id)
的输出是“LegalCompliance”,它与我的
id:'LegalCompliance'相同,
它在最新的代码库上工作;我认为在4.2.1和4.2.3之前版本之间,与此问题相关的任何内容都没有改变,但我会检查一下。