如何在 extjs 中重新添加已删除的选项卡

Posted 2023-02-26

【中文标题】如何在 extjs 中重新添加已删除的选项卡

【英文标题】：How to re-add a removed tab in extjs

【发布时间】：2013-07-20 22:27:06

【问题描述】：

我想添加/删除一个标签。

我知道添加/删除方法。但我的问题是我想再次重新添加相同的选项卡。重新添加的选项卡存储在内存中。我希望能够做这样的事情：

function addMyTab(tab) 
    var me = this;
    if (!tab)  // use most recently added tab
        tab = me.tab;
     else  // update most recently added tab
        me.tab = tab;
    

    var tabPanel = Ext.ComponentQuery.query(..);
    tabPanel.removeAll();
    tabPanel.add(me.tab);

但这不起作用，它会引发此错误：

未捕获的类型错误：无法读取 null 的属性“addCls”

Extjs forum thread 建议这是由于尝试添加已销毁的元素。

如何重复使用标签？

【问题讨论】：

这里的tab 是什么，你确定它是你打电话给tabPanel.add 时的想法吗？

@ChrisFarmer 选项卡是 Ext.panel.Panel。没有理由改变它，至少在我的代码中。

您是否尝试过将remove 的autoDestroy 参数专门设置为false？当然，您并没有真正尝试重新添加实际的面板，因为如果这是真的，您就不会收到该错误，对吧？

真正令人困惑的问题，需要更多代码。

@ChrisFarmer 将autoDestroy 设置为false 成功了。谢谢！如果您想添加答案。

【参考方案1】：

由于您似乎在说要重新添加要删除的同一个面板，我猜测该面板在删除步骤后被销毁。我认为这样的事情应该可行：

// initially add the panel
tabPanel.add(myPanel);

// remove it with autoDestroy set to false so Ext doesn't kill your panel
tabPanel.removeAll(false); 

// re-add the panel
tabPanel.add(myPanel);

【讨论】：

@Is7aq 确保在不会重复使用的标签上调用 Ext.destroy()

【参考方案2】：

试试这样的：

var currentTab = null;
function addMyTab(tab) 
    var me = this;
    if (tab)  // use most recently added tab
        currentTab = tab;
     
    var tabPanel = Ext.ComponentQuery.query(..);
    tabPanel.removeAll();
    tabPanel.add(currentTab );

currentTab 是一个全局变量。如果传递一个新选项卡来更新当前选项卡，请将当前选项卡替换为新选项卡 it ，否则按原样使用当前选项卡。确保在第一次使用 currentTab 之前，使用一些选项卡对其进行初始化。