Ext JS Tab Panel - динамические вкладки - вкладка не работает

Question

Если бы кто-нибудь мог мне помочь в этом. У меня есть панель дерева, чьи узлы при щелчке загружают вкладку в панель вкладок.

Вкладки загружаются хорошо, но моя проблема заключается в дублировании. Мне нужно проверить, существует ли вкладка, прежде чем добавлять ее в панель вкладок. Кажется, я не могу это решить, и я ем свои мозги. Это довольно просто, и я проверил stackoverflow и EXT JS Forums для решений, но они, похоже, не работают для меня, или я слепой.

Это мой код для дерева:

 
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 Panel

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

Ключ к делать это, чтобы построить последовательные именования для вкладок, так что вы можете надежно знать, если вкладка была добавлены еще. Похоже, вы решили использовать идентификатор узла - это нормально. Когда вы вызываете TabPanel.add, отправьте идентификатор узла в качестве новой вкладки id. Затем вы можете проверить, существует ли он с TabPanel.findById.

Примечание: некоторые из ваших имен переменных довольно запутывают. TabPanel - это плохой выбор для имени переменной, чтобы они начинались с нижнего регистра и никогда не называли их после классов framework. Попробуйте 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(); 
}