title: how do i create a tab in a tabpanel onclick?
body: <p>I have an actioncolumn in a grid. I used to open a window after i clicked on this but now do we want to open a new tab in the tabpanel instead of the windows. This is the tab i want to generate when someone clicks on the actionpanel:</p>
  
  <pre><code>Ext.define('MyApp.view.MyTabPanel2', {
  extend: 'Ext.tab.Panel',
  alias: 'widget.mytabpanel2',
  
  closable: true,
  title: 'Report {name}',
  activeTab: 1,
  
  initComponent: function() {
      var me = this;
  
      Ext.applyIf(me, {
          dockedItems: [
              {
                  xtype: 'toolbar',
                  dock: 'top',
                  items: [
                      {
                          xtype: 'textfield',
                          fieldLabel: 'Reference',
                          labelAlign: 'top'
                      },
                      {
                          xtype: 'datefield',
                          fieldLabel: 'From',
                          labelAlign: 'top'
                      },
                      {
                          xtype: 'datefield',
                          fieldLabel: 'To',
                          labelAlign: 'top'
                      },
                      {
                          xtype: 'tbfill'
                      },
                      {
                          xtype: 'button',
                          text: 'Open report'
                      },
                      {
                          xtype: 'button',
                          text: 'Save report'
                      },
                      {
                          xtype: 'button',
                          text: 'Export report'
                      },
                      {
                          xtype: 'button',
                          text: 'Refresh data'
                      }
                  ]
              }
          ],
          items: [
              {
                  xtype: 'gridpanel',
                  title: 'Grid',
                  forceFit: true,
                  store: 'resultStore',
                  columns: [
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'ccuDesignation',
                          text: 'CCU Designation'
                      },
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'carrierName',
                          text: 'Carrier Name'
                      },
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'dataPackageName',
                          text: 'Data package name'
                      },
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'bytesRx',
                          text: 'bytesRX'
                      },
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'bytesTx',
                          text: 'bytesTX'
                      }
                  ],
                  viewConfig: {
  
                  }
              },
              {
                  xtype: 'panel',
                  title: 'Chart',
                  dockedItems: [
                      {
                          xtype: 'chart',
                          height: 250,
                          animate: true,
                          insetPadding: 20,
                          store: 'resultStore',
                          dock: 'top',
                          axes: [
                              {
                                  type: 'Category',
                                  fields: [
                                      'ccuDesignation'
                                  ],
                                  position: 'bottom',
                                  title: 'CCU Designation'
                              },
                              {
                                  type: 'Numeric',
                                  fields: [
                                      'bytesTx'
                                  ],
                                  position: 'left',
                                  title: 'Bytes'
                              },
                              {
                                  type: 'Numeric',
                                  fields: [
                                      'bytesRx'
                                  ],
                                  position: 'left',
                                  title: 'Bytes'
                              }
                          ],
                          series: [
                              {
                                  type: 'line',
                                  xField: 'x',
                                  yField: [
                                      'bytesTx'
                                  ],
                                  smooth: 3
                              },
                              {
                                  type: 'line',
                                  xField: 'x',
                                  yField: [
                                      'bytesRx'
                                  ],
                                  smooth: 3
                              }
                          ],
                          legend: {
  
                          }
                      }
                  ]
              }
          ]
      });
  
      me.callParent(arguments);
  }
  });
  </code></pre>
  
  <p>i have read this at sencha:</p>
  
  <pre><code>// tab generation code
  var index = 0;
  while(index &lt; 3){
      addTab(index % 2);
  }
  
  function addTab (closable) {
      ++index;
      tabs.add({
          title: 'New Tab ' + index,
          iconCls: 'tabs',
          html: 'Tab Body ' + index + '&lt;br/&gt;&lt;br/&gt;' + Ext.example.bogusMarkup,
          closable: !!closable
      }).show();
  }
  
  Ext.createWidget('button', {
      renderTo: 'addButtonCt',
      text: 'Add Closable Tab',
      handler: function () {
          addTab(true);
      },
      iconCls:'new-tab'
  });
  
  Ext.createWidget('button', {
      renderTo: 'addButtonCt',
      text: 'Add Unclosable Tab',
      handler: function () {
          addTab(false);
      },
      iconCls:'new-tab',
      style: 'margin-left: 8px;'
  });
  </code></pre>
  
  <p>But i don't have the var tabs in my script. So how can i add the tab to this:</p>
  
  <pre><code>Ext.define('MyApp.view.MyViewport', {
  extend: 'Ext.container.Viewport',
  
  layout: {
      type: 'border'
  },
  
  initComponent: function() {
      var me = this;
  
      Ext.applyIf(me, {
          items: [
              {
                  xtype: 'tabpanel',
                  id: 'tabs',
                  activeTab: 1,
                  region: 'center',
                  items: [
                      {
                          xtype: 'gridpanel',
                          title: 'Reports',
                          forceFit: true,
                          store: 'ReportsStore',
                          columns: [
                              {
                                  xtype: 'gridcolumn',
                                  dataIndex: 'Name',
                                  text: 'Name'
                              },
                              {
                                  xtype: 'gridcolumn',
                                  dataIndex: 'Type',
                                  text: 'Type'
                              },
                              {
                                  xtype: 'gridcolumn',
                                  dataIndex: 'Description',
                                  text: 'Description'
                              },
                              {
                                  xtype: 'actioncolumn',
                                  dataIndex: 'queryFields',
                                  items: [
                                      {
                                          handler: function(view, rowIndex, colIndex, item, e) {
                                              addTab;
                                              alert('clicked');
                                          },
                                          altText: 'Open report',
                                          icon: 'img/report-arrow.png',
                                          tooltip: 'Open report'
                                      }
                                  ]
                              }
                          ],
                          viewConfig: {
  
                          },
                          dockedItems: [
                              {
                                  xtype: 'toolbar',
                                  dock: 'bottom',
                                  items: [
                                      {
                                          xtype: 'tbfill'
                                      },
                                      {
                                          xtype: 'button',
                                          iconCls: 'addReport',
                                          text: 'Add report',
                                          listeners: {
                                              click: {
                                                  fn: me.onButtonClick,
                                                  scope: me
                                              }
                                          }
                                      }
                                  ]
                              }
                          ]
                      }
                  ]
              }
          ]
      });
  
      me.callParent(arguments);
  },
  
  onButtonClick: function(button, e, options) {
      Ext.create('MyApp.view.addReport').show();
  }
  
  });
  var tabs = Ext.getCmp('tabs');
  
  function addTab (closable) {
  alert('yes');
  tabs.add(Ext.create('MyApp.view.MyTabPanel2'));
   }
  </code></pre>
  
  <p>How can i do this? I work with extjs designer 2</p>