javascript - ExtJS3:无法读取未定义的属性 'parentNode'

Question

如果我们使用 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 .

有人可以告诉我如何解决这个问题吗？

Answer 1

虽然 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.