Javascript ExtJS在关闭时隐藏选项卡,而不是删除
我有以下代码在tabpanel中创建选项卡: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
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之前版本之间,与此问题相关的任何内容都没有改变,但我会检查一下。