ExtJS3：无法读取未定义的属性“parentNode”

Posted 2023-02-26

【中文标题】ExtJS3：无法读取未定义的属性“parentNode”

【英文标题】：ExtJS3: Cannot read property 'parentNode' of undefined

【发布时间】：2014-12-29 07:17:15

【问题描述】：

如果我们使用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 中遇到以下异常。

谁能给我电话我该如何解决这个问题？

【问题讨论】：

你能在小提琴上重现它吗？

【参考方案1】：

虽然 Pieter B 对 closeAction 的看法不正确，但他对使用 beforeclose 事件的建议是正确的！

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

this[this.closeAction]();

并在多个事件回调方法中使用。

重要的是：

标签事件

没有实际的选项卡类 - 每个选项卡只是一个组件，例如 一个小组。但是，当在 TabPanel 中呈现时，每个子组件 可以触发仅存在于选项卡且不存在的其他事件 可从其他组件获得。这些事件是：

activate ：当此组件成为活动选项卡时触发。 deactivate ：当作为活动选项卡的组件被停用时触发。 beforeclose ：当用户单击可关闭选项卡的关闭工具时触发。 可以通过从处理程序返回 false 来否决。 close : 触发一个已被用户关闭的可关闭标签。

所以理论上类似于 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 只是 隐藏并将留在原地。对于最终版本，您将 需要删除它们或将它们的大小设置为零。

【讨论】：

嗯，ExtJS3 是很久以前的事了；) 我不得不编辑我的答案才能最终让它工作。小提琴已更新为

谢谢 :) 检查了你的小提琴，但我仍然得到同样的错误，虽然我做了改变。我应该给tab.setVisible(true) 吗？这就是我动态打开标签面板的方式，if(n.text=='Manage') that.hometabPanel.add(manage.Manage).show(); 我应该在这里进行更改吗？

@Shruti 好的，您总是需要为组件定义适当的布局和/或高度/宽度。在您的示例小提琴中，我为标签面板提供了 400 的高度，为孩子提供了 200 的高度。见我的updated fiddle

谢谢，但我的代码即使在进行了这些更改后似乎也无法正常工作，我遇到了与帖子中提到的相同的异常。

@shruti 好吧，如果没有看到这些错误，我无法说出任何关于这些错误的信息。但无论如何，这个例子应该对你有所帮助，因为它可以工作，即使是内容。大胆猜测是，您对变量进行了大量工作，并以这种方式杀死了您的渲染组件之一。但就像有人说的那样，这只是一个疯狂的猜测......

【参考方案2】：

我认为closeAction 不应该被使用。

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

【讨论】：

closeAction:'hide' 属性在window 的情况下有效，我正在寻找类似tabpanel 的东西