Панель вкладок 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

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

Примечание: некоторые имена ваших переменных довольно запутанные. TabPanel - плохой выбор для имени переменной, поэтому они должны начинаться со строчных букв и никогда не называть их после классов инфраструктуры. Попробуйте tabs или tp. Кроме того, соглашение об именах будет более понятным, если вы добавите в качестве префикса идентификатор узла строку типа tab-. Добавление новой вкладки также может быть инкапсулировано в пользовательский метод на панели вкладок, если вы ее расширите.

Answer 2

В API Extjs произошли некоторые изменения .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

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 4

Вам следует заменить функцию 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 5

Не проверено, но я думаю, что это сработает.

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