extJS - Can't switch between tabs after adding a new tab programatically

Question

I'm adding tabs to tab panel programatically. After adding more than one tab programatically I can't switch between them. Tried different solutions and still can't figure out what am I doing wrong Here is my tab panel:

Ext.define('Medlemssystem.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    requires: [
        'Medlemssystem.view.MainTab.MainTab',
        'Ext.toolbar.Toolbar',
        'Ext.toolbar.Fill',
        'Ext.tab.Panel',
        'Ext.tab.Tab'
    ],

    border: false,
    cls: 'body',
    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'center',
                    border: false,
                    layout: 'border',
                    title: '',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            region: 'north',
                            cls: 'mainDockBar',
                            dock: 'top',
                            border: false,
                            height: 33,
                            items: [
                                {
                                    xtype: 'tbfill'
                                },
                                {
                                    xtype: 'button',
                                    text: 'Hjelp',
                                    style: 'color: red;',
                                    listeners: {
                                        click: {
                                            fn: me.onHelpBtnCLick,
                                            scope: me
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: 'Logg ut',
                                    listeners: {
                                        click: {
                                            fn: me.onButtonClick1,
                                            scope: me
                                        }
                                    }
                                }
                            ]
                        }
                    ],
                    items: [
                        {
                            xtype: 'tabpanel',
                            region: 'center',
                            frame: true,
                            id: 'tabs',
                            itemId: 'mainTabPanel',
                            manageHeight: false,
                            items: [
                                {
                                    xtype: 'mainTab'
                                }
                            ],

                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onButtonClick1: function(button, e, eOpts) {

        window.location = "LogOutServlet";

    },

    onHelpBtnCLick: function(button, e, eOpts) {

        var url = "help";
        var win = window.open(url, '_blank');
        win.focus();

    }

});

Here is how I add a new tab:

var tabs = dataview.up('#mainTabPanel');

        var newTab = Ext.create('Medlemssystem.view.MemberInfoTab.MemberInfoPanel',
            {
                title: record.get('firstName') + ' ' + ' ' + record.get('lastName'),
            })
        var active = tabs.add(newTab);

        tabs.setActiveTab(active);

And here is a tab I add:

Ext.define('Medlemssystem.view.MemberInfoTab.MemberInfoPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.memberInfoPanel',

    requires: [
        'Medlemssystem.view.MemberInfoTab.MemberDetailsPanel',
        'Medlemssystem.view.MemberInfoTab.OrgInfoPanel',
        'Ext.panel.Panel'
    ],

    cls: 'memberTab',
    id: 'memberTab1',
    itemId: 'memberTab',
    layout: 'border',
    closable: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'memberDetailsPanel',
                    itemId: 'infoPanel',
                    flex: 1,
                    region: 'west'
                },
                {
                    xtype: 'memberOrgInfoPanel',
                    flex: 2,
                    region: 'center'
                }
            ],
            listeners: {
                beforerender: {
                    fn: me.onMemberTab1BeforeRender,
                    single: true,
                    scope: me
                },
                afterrender: {
                    fn: me.onMemberTab1AfterRender,
                    single: true,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onMemberTab1BeforeRender: function(component, eOpts) {

    },
    onMemberTab1AfterRender: function(component, eOpts) {

    }

});

Any suggestions?

Answer 1

I didn't run your code but it could be because of non-unique ids. Don't use ids whatsoever and itemIds only if you need. Also, take care that itemIds are unique within the container, for example, you cannot have more than one tab with same itemId in one tab panel.