extjs - Ext JS 选项卡面板 - 动态选项卡 - 选项卡存在不工作

Question

如果有人可以帮助我，我将不胜感激。

我有一个 treepanel，单击它的节点时会将选项卡加载到 tabpanel 中。

选项卡加载正常，但我的问题是重复。在将选项卡添加到选项卡面板之前，我需要检查选项卡是否存在。我似乎无法解决这个问题，它正在吞噬我的大脑。这很简单，我已经检查了 stackoverflow 和 EXT JS 论坛的解决方案，但它们似乎对我不起作用，或者我是瞎子。

这是我的树代码:

var opstree = new Ext.tree.TreePanel({
    renderTo: 'opstree',
    border: false,
    width: 250,
    height: 'auto',
    useArrows: false,
    animate: true,
    autoScroll: true,
    dataUrl: 'libs/tree-data.json',
    root: {
        nodeType: 'async',
        text: 'Tool Actions'
    },
    listeners: {
        render: function() {
            this.getRootNode().expand();
        }
    }
});

opstree.on('click', function(n) {
    var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    renderPage(n.id);
});

function renderPage(tabId) {

    var TabPanel = Ext.getCmp('content-tab-panel');
    var tab = TabPanel.getItem(tabId);

    //Ext.MessageBox.alert('TabGet',tab);

    if (tab) {
        TabPanel.setActiveTab(tabId);
    } else {
        TabPanel.add({
            title: tabId,
            html: 'Tab Body ' + (tabId) + '<br/><br/>',
            closable: true
        }).show();

        TabPanel.doLayout();
    }
}

这是tabpanel的代码:

new Ext.TabPanel({
    id: 'content-tab-panel',
    region: 'center',
    deferredRender: false,
    enableTabScroll: true,
    activeTab: 0,

    items: [{
        contentEl: 'about',
        title: 'About the Billing Ops Application',
        closable: true,
        autoScroll: true,
        margins: '0 0 0 0'
    }, {
        contentEl: 'welcomescreen',
        title: 'PBRT Application Home',
        closable: false,
        autoScroll: true,
        margins: '0 0 0 0'
    }]
});

有人可以帮忙吗？

Answer 1

这样做的关键是为您的选项卡建立一致的命名约定，这样您就可以可靠地知道该选项卡是否已添加。看起来您已选择使用节点的 ID - 这很好。当您调用 TabPanel.add 时，将节点的 ID 作为新选项卡的 id 发送。然后您可以使用 TabPanel.findById 测试它是否存在。

注意:您的一些变量名称非常困惑。 TabPanel 是一个糟糕的变量名选择，让它们以小写字母开头并且永远不要在框架类之后命名它们。试试 tabs 或 tp。此外，如果在节点 ID 前加上 tab- 之类的字符串，命名约定会更清晰。如果您扩展它，添加新选项卡也可以封装到选项卡面板上的自定义方法中。