title: How to add tabs to a tabpanel in Ext Js
body: <p>I have a tab panel in the center of the border layout. I want tabs to be added to the tabPanel when I click on the 'Add tab'. I tried using handlers and listeners both of which is not working for me. What is wrong with my code ?</p>
  
  <pre><code>Ext.define('MyApp.view.Viewport',{
      extend: 'Ext.container.Viewport',
      initComponent: function(){
          var me = this;
          Ext.apply(me,{
              layout: 'border',
              items: [{
                  region: 'west',
                  width: '15%',
                  title: 'West'
              },{
                  region: 'center',
                  xtype: 'tabpanel',
                  items:[{
                      title: 'New Tab',
                      html: 'Tab content',
                      collapsible: true
                  },{
                      title: 'Add tab',
                      listeners: {
                          click: {
                              fn: function(){  
                                  console.log('hey i am here');
                              }
                          }
                      },
                      handler: function(btnPlus){
                          btnPlus.up().add({
                              xtype: 'panel',
                              title: 'New Tab'
                          });
                          console.log('hey i am here');
                      }
                  }]
              }]
          });
          me.callParent();
      }
  });
  </code></pre>
  
  <p>Also the Console messages are not getting printed :c</p>