Ext JS Tab Panel - dynamic tabs - tab not working

Question

It would be nice if someone could help me with this.

I have treepanelwhose nodes, when clicked, load the tab into tabpanel.

Tabs load well, but my problem is duplication. I need to check if a tab exists before adding it to the tab bar. It seems that I can’t solve it, and I eat my brains. It's pretty simple, and I checked stackoverflow and EXT JS Forums for solutions, but they don't seem to work for me, or I'm blind.

This is my code for the tree:

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

And this is the code for 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'
    }]
});

Can anyone help?

Answer 1

, , ​​ . , node id - . TabPanel.add, node id id. , TabPanel.findById.

: . TabPanel - , framework. tabs tp. , , node , 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

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