Question

我有以下代码在tabpanel中创建一个标签：

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中删除标签？

Answer 1

引用Ext JS 4.2.2 docs：

注意：默认情况下，选项卡的关闭工具会破坏子选项卡Component及其所有后代。这使得子选项卡组件及其所有后代都无法使用。要启用选项卡的重用，请使用autoDestroy配置TabPanel：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节点重新附加回文档正文，然后我们将其插入选项卡面板，就像没有发生任何事情一样。瞧。

ExtJS隐藏选项卡关闭，而不是删除

1 个答案: