Hinzufügen einer Registerkarte (Element) zu Tab-Panel durch Klicken auf Schaltfläche, extjs

Question

Ich habe eine Registerkarte, die zunächst 1 Registerkarte und eine Schaltfläche hat. Der Benutzer sollte jedoch in der Lage sein, weitere Registerkarten hinzuzufügen, indem er auf die Schaltfläche klickt. Hier ist der Code so weit:

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

Ihr Ansatz ist richtig, Alles, was Sie brauchen, ist ein Panel zu erstellen und fügen Sie es dem TabPanel.

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() 
    });