ExtJS dynamically adding tabs

Question

everyone!

I'm creating an application with ExtJS and I've got a tabpanel defined. I also get a treepanel menu with all items and a class for each of these items. What I'm trying to achieve is when I click a menu item it will automatically add a new tab to the tabpanel, but change the title according to the name of parentNode. However when I click the, for example, home button it adds two new tabs one with correctly configured title, but without any content (http://tinypic.com/r/2whmo2d/5) and another one without any title but content and everything else is configured as in the class definition file (http://tinypic.com/r/105thyb/5). How can I manage to get one tab with title plus the content?

Thanks for any answer.

Menu JSON example:

{
    "children": [
    {
        "text": "Home",
        "leaf": true,
        "dbName": "home"
    },
    {
        "text": "Sveatlo",
        "expanded": false,
        "leaf": false,
        "dbName": "sveatlo",
        "children": [
            {
                "text": "Vydané faktúry",
                "leaf": true,
                "dbName": "vydane-faktury"
            },
            {
                "text": "Prijaté faktúry",
                "leaf": true,
                "dbName": "prijate-faktury"
            }
        ]
    },
    {
        "text": "Hájočka",
        "expanded": false,
        "leaf": false,
        "dbName": "hajocka",
        "children": [
            {
                "text": "Vydané faktúry",
                "leaf": true,
                "dbName": "vydane-faktury"
            },
            {
                "text": "Prijaté faktúry",
                "leaf": true,
                "dbName": "prijate-faktury"
            }
        ]
    }
    ],
    "success": true
}

The code adding a new tab (from the Main controller):

setMenuItem: function(record){
    var dbName = record.get('dbName');
    var classname;
    if(record.isLeaf()){
        classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
    } else {
        classname = 'Fleximanager.view.pages.CorpMain';
    }
    var tabPanel = Ext.getCmp('flexitabs');
    var tabId = dbName + 'tab'
    var tabIndex = tabPanel.items.findIndex('id', tabId)


    if(tabIndex != -1){
        tabPanel.setActiveTab(tabIndex);
    } else {
        if(record.isLeaf() && dbName != 'home'){
            tabPanel.add(Ext.create(classname),{
                title: record.parentNode.get('text') + ' - ' + record.get('text')
            });
        } else {
            tabPanel.add(Ext.create(classname),{
                title: record.get('text')
            });
        }
        tabPanel.setActiveTab(tabId);
    }
}

My tabpanel:

Ext.define('Fleximanager.view.main.TabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.flexitabs',
    id: 'flexitabs',

    layout: {
        type: 'fit',
    },
    width: '100%',
    height: '100%',

    items: [{
        title: 'Start',
        closable: true,
        layout: 'vbox',
        id: 'starttab',
        items: [{
            xtype: 'panel',
            border: 5,
            html: 'Statistics',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('statsMenu').expand(true);
                    }
                }
            }
        },{
            xtype: 'panel',
            border: 5,
            html: 'Contacts',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('contactsMenu').expand(true);
                    }
                }
            }
        },{
            xtype: 'panel',
            border: 5,
            html: 'Calendar',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('calendarMenu').expand(true);
                    }
                }
            }
        }]
    }]
});

And for example the definition of one of my menu items:

Ext.define('Fleximanager.view.pages.home', {
    extend: 'Ext.panel.Panel',
    xtype: 'hometab',
    id: 'hometab',

    closable: true,
    layout: 'vbox',
    items: [{
        xtype: 'panel',
        html: 'HOME TAB'
    }]
});

Krzysztof Krzysztof · Accepted Answer · 2013-11-10T09:52:03

You have something wrong in code which adds tab to panel. Try this:

if (record.isLeaf() && dbName != 'home') {
    tabPanel.add(Ext.create(classname, {
        title: record.parentNode.get('text') + ' - ' + record.get('text')
    }));
} else {
    tabPanel.add(Ext.create(classname, {
        title: record.get('text')
    }));
}

In your code, you add 2 tabs - one created from classname, and one which have only title. IMO you should apply title to tab created from classname, that is why it should go as second argument for Ext.create.

ExtJS dynamically adding tabs

1 Answers