Extjs Ext JS选项卡面板-动态选项卡-选项卡不工作

如果有人能在这件事上帮助我，我将不胜感激

我有一个

treepanel

，当单击它的节点时，会将选项卡加载到

选项卡面板

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

这是我的树代码：

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();
    }
}

---

有人能帮忙吗？

未经测试，但我认为这会奏效

if (!Ext.getCmp('content-tab-panel')) {
    Tabpanel.add({ config }).show();
    Tabpanel.doLayout();
}

---

做到这一点的关键是为选项卡建立一致的命名约定，这样您就可以可靠地知道该选项卡是否已添加。看起来您已经选择使用节点的id-这很好。调用

TabPanel.add

时，将节点id作为新选项卡的

id

发送。然后可以使用

TabPanel.findById

测试它是否存在

---

注意：您的一些变量名非常混乱

TabPanel

对于变量名来说是一个糟糕的选择，让它们以小写开头，并且永远不要以框架类的名字命名。尝试

选项卡

或

tp

。此外，如果在节点id前面加上类似于

tab-

的字符串，命名约定将更加清晰。添加新选项卡也可以封装到选项卡面板上的自定义方法中（如果您对其进行扩展）。

您应该将函数

renderPage（tabId）

替换为以下内容：

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) + '
',    
     id: tabId,**// this line very important, without this its not working**  
     closable:true
     }).show(); 

     TabPanel.doLayout();
    }    
   }

---

Extjs API有一些修改。findById（）不起作用，要在Extjs 4.0中实现这一点，请尝试以下方法

function AddTabs(tabTitle,yourTabId){
    var YourTabPanel = Ext.getCmp('YourTabPanelId');
    var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
    if(TabToCheck){
       YourTabPanel.setActiveTab(yourTabId);
    } else {
    YourTabPanel .add({
        title:tabTitle,
        id:nId,
        closable:true,
        autoScroll:true,
        layout: 'fit',
        }).show();
  }
  YourTabPanel.doLayout();
}

---

如果Ext.TabPanel不存在，则会添加一个选项卡。但它总是存在的——你需要检查特定选项卡的存在，而不是整个面板。哦，是的。这就是我一大早发布的内容。：；-）谢谢各位。我对ExtJS还很陌生。掌握窍门！我在那里瞎了眼。我以为我添加了节点id作为已创建选项卡的id，但没有添加。谢谢你指出这一点，乔纳森。这对我有用。欢迎来到StackOverflow！您可以添加一些文本来解释您的代码段吗？：）

function addNewTab(nName,nId){
    //nName is Node Name and nId is node Id
    //Ext.Msg.alert('message',nId);
    var tp = Ext.getCmp('content-tab-panel');//Tab Panel Id
    var checkTab=tp.findById(nId);
    if(checkTab){
        tp.setActiveTab(nId);
    } else {
        tp.add({
            title:nName,
            id:nId,
            closable:true,
            autoScroll:true
            }).show();
    }
}

function AddTabs(tabTitle,yourTabId){
    var YourTabPanel = Ext.getCmp('YourTabPanelId');
    var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
    if(TabToCheck){
       YourTabPanel.setActiveTab(yourTabId);
    } else {
    YourTabPanel .add({
        title:tabTitle,
        id:nId,
        closable:true,
        autoScroll:true,
        layout: 'fit',
        }).show();
  }
  YourTabPanel.doLayout();
}