CODEWITHSUNDEEP
extjs
Joey Ezekiel
Joey Ezekiel

Reputation: 1027

Ext JS Tab Panel - Dynamic Tabs - Tab Exists Not Working

Would appreciate if somebody could help me on this.

I have a treepanel whose nodes when clicked load a tab into a tabpanel.

The tabs are loading alright, but my problem is duplication. I need to check if a tab exists before adding it to the tab panel. I cant seem to have this resolved and it is eating my brains. This is pretty simple and I have checked stackoverflow and the EXT JS Forums for solutions but they dont seem to work for me or I'm being 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 the 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 somebody please help?

Upvotes: 3

Views: 28398

Answers (5)

The John
The John

Reputation: 11

There has been some modifications on the Extjs API .findById() doesn't work, to implement this in ExtJs 4.0 try this

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

Upvotes: 1

Sarwar
Sarwar

Reputation: 61

You should replace the function renderPage(tabId) with the following:

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

Upvotes: 0

user599613
user599613

Reputation: 

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

Upvotes: 0

Jonathan Julian
Jonathan Julian

Reputation: 12264

The key to doing this is to build a consistent naming convention for your tabs, so you can reliably know if that tab has been added yet. It looks like you've chosen to use the node's id - which is fine. When you call TabPanel.add, send the node's id as the new tab's id. Then you can test to see if it exists with TabPanel.findById.

Note: some of your variable names are pretty confusing. TabPanel is a poor choice for a variable name, keep them beginning with lower case and never name them after the framework classes. Try tabs or tp. Also, the naming convention will be clearer if you prefix the node id with a string like tab-. Adding a new tab could also be encapsulated into a custom method on your tab panel, if you extend it.

Upvotes: 2

Jason
Jason

Reputation: 1183

Untested, but I think this would work.

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

Upvotes: -1

Related Questions