Question

如果我们使用tabPanel关闭closable: true，则默认操作将销毁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中得到以下异常因此，我无法从我的treepanel导航到其他tabpanel，我在js控制台Uncaught TypeError: Cannot read property 'className' of undefined中收到以下异常。

有人可以打电话给我如何解决这个问题？

Answer 1

虽然 Pieter B 对closeAction他对他使用beforeclose事件的建议是对的是对的！

首先让我们看一下cloaseAction类中Ext.Window属性的实现，如下所示：

this[this.closeAction]();

并用于多个事件回调方法。

重要的是：

标签事件

没有实际的选项卡类 - 每个选项卡只是一个组件，如   小组。但是，在TabPanel中渲染时，每个子Component都有   可以触发仅对选项卡存在的其他事件，而不是   可从其他组件获得。这些事件是：


activate ：当此Component成为活动标签时触发。

取消激活：当活动标签的组件停用时触发。

beforeclose ：当用户点击可关闭标签的关闭工具时触发。 可能会因处理程序返回false而被否决。

关闭：触发用户已关闭可关闭的标签页。

所以~~在理论上类似于~~ 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'}
    ]
});

请注意，这是一个已经工作的剪切，但你会还需要在这里修复一些部分。例如，tab el就是隐藏并将留在原地。对于最终版本，您将要么需要删除它们或将它们的大小设置为零。

Answer 2

我认为不应该使用closeAction。

您可以改为使用事件beforeclose，隐藏监听器中的tabpanel并返回false以禁用关闭事件。

ExtJS3：无法读取undefined的属性'parentNode'

2 个答案: