如果我们使用 closable: true
关闭 tabPanel
,则默认操作将销毁 tabPanel。因此,由于 tabPanel 被破坏,我们将无法再次显示 tabPanel。但是,我不希望 tabPanel 被破坏,它必须被隐藏,所以我尝试了这个
this.Manage = new Ext.TabPanel({
title: 'Manage',
closable: true,
closeAction: 'hide',
activeTab: 0,
items:[
this.manageGridPanel
]
});
发生的情况是,我能够显示 tabPanel,但其中的子元素没有显示。而且我在 js 控制台中遇到以下异常 Uncaught TypeError: Cannot read property 'parentNode' of undefined
另外,因此,我无法从树面板导航到其他选项卡面板,我收到以下信息js 控制台中的异常 Uncaught TypeError: Cannot read property 'className' of undefined
.
有人可以告诉我如何解决这个问题吗?
最佳答案
虽然 Pieter B 对 closeAction
的看法不正确,但他关于使用 beforeclose
事件的建议是正确的!
首先让我们看一下 Ext.Window
类中 cloaseAction
属性的实现,如下所示:
this[this.closeAction]();
并在多个事件回调方法中使用。
重要的是:
Tab Events
There is no actual tab class — each tab is simply a Component such as a Panel. However, when rendered in a TabPanel, each child Component can fire additional events that only exist for tabs and are not available from other Components. These events are:
- activate : Fires when this Component becomes the active tab.
- deactivate : Fires when the Component that was the active tab becomes deactivated.
- beforeclose : Fires when the user clicks on the close tool of a closeable tab. May be vetoed by returning false from a handler.
- close : Fires a closeable tab has been closed by the user.
所以理论上类似于this work :
new Ext.TabPanel({
title: 'Manage',
renderTo: Ext.getBody(),
closable: true,
closeAction: 'hide',
defaults: {
listeners: {
'beforeclose': function(panel) {
// We should have the tab scope here
var closeAction = this.ownerCt.closeAction
if (closeAction === 'hide') {
panel.hide();
Ext.get(panel.tabEl).setVisible(false);
return false;
}
return true;
}
}
},
activeTab: 0,
items:[
{xtype:'panel', title: 'Tab 1', id:'tab1', closable: true, html: 'Tab 1'},
{xtype:'panel', title: 'Tab 2', id:'tab2', closable: true, html: 'Tab 2'}
]
});
Please notice that this is a already working snipped but you will still need to fix some parts here. For example the tab el are just hidden and will stay in place. For a final version you will either need to remove them or set their size to zero.
关于javascript - ExtJS3:无法读取未定义的属性 'parentNode',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27684916/