Ext JS標籤面板 - 動態標籤 - 標籤存在不起作用

Question

如果有人能幫助我解決這個問題，我們將不勝感激。 我有一個樹面板，其節點點擊時將一個標籤加載到標籤面板中。

該標籤加載好，但我的問題是重複。在將它添加到標籤面板之前，我需要檢查標籤是否存在。我似乎不能解決這個問題，它正在吃掉我的大腦。這很簡單，我已經檢查過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) + '

',  
    closable:true 
    }).show(); 

    TabPanel.doLayout(); 
    }  
    } 
     }); 

，這是爲Tab平板

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

未經測試，但我認爲這會奏效。

if (!Ext.getCmp('content-tab-panel')) { 
    Tabpanel.add({ config }).show(); 
    Tabpanel.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

已經有上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(); 
}