ボタンをクリックしてタブパネルにタブ（項目）を追加する、extjs

Question

私はタブパネルを持っています。しかし、ユーザーはボタンをクリックしてタブを追加することができます。ここでのコードは、これまでです：

var tabPan = Ext.create('Ext.TabPanel', { 
listeners: { 
    beforetabchange: function(tabs, newTab, oldTab, eOpts) { 
     if (newTab.title=='Add') { // Or some other condition 

      return false; 
     } 
    } 
}, 
items:[ 
{ 
    title: 'Default Tab', 
    html: innerHtml 
}, 
{ 
    xtype: 'button', 
    title : 'Add', 
}, 
] 
}) 

Answer 1

あなたのアプローチが必要なのは、パネルを作成して、タブパネルに追加することで、権利です。

var i = 1; 

    var onAddTab = function(tabPanel) { 
     var newTab = { 
      xtype: 'panel', 
      title: 'Untitled Tab ' + (i++) 
     }; 

     var index = tabPanel.items.length - 1; 
     var newTabItem = tabPanel.insert(index, newTab); 

     tabPanel.setActiveTab(newTabItem); 
    }; 

    var tabPanel = Ext.create('Ext.TabPanel', { 
     listeners: { 
      beforetabchange: function(tabs, newTab, oldTab, eOpts) { 
       if (newTab.title == 'Add') { 
        onAddTab(tabPanel); 
        return false; 
       } 
      } 
     }, 
     items: [{ 
      title: 'Default Tab', 
      html: 'Hello World' 
     }, { 
      xtype: 'button', 
      title: 'Add', 
     }], 
     renderTo: Ext.getBody() 
    });