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。此外，如果使用类似tab-的字符串为节点标识添加前缀，则命名约定将更加清晰。如果扩展，也可以在选项卡面板上将新选项卡封装到自定义方法中。

Answer 2

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

Answer 3

您应该使用以下内容替换函数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();
    }    
   }

Answer 4

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

Answer 5

未经测试，但我认为这样可行。

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

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

5 个答案: