title: extJS - Can't switch between tabs after adding a new tab programatically
body: <p>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:</p>
  
  <pre><code>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();
  
      }
  
  });
  </code></pre>
  
  <p>Here is how I add a new tab:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>And here is a tab I add:</p>
  
  <pre><code>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) {
  
      }
  
  });
  </code></pre>
  
  <p>Any suggestions?</p>