Schliessbare Tabs können nicht geschlossen und Tabs aktiviert werden

Question

Ich habe einen fiddle gemacht, der diese Probleme demonstriert. Das erste Problem ist, dass es nicht möglich ist, verschließbare Tabs in einer TabBar zu schließen. Der Code ist so einfach wie:

Ext.create("Ext.tab.Bar",{ 
    renderTo: "one", 
    items:[{"text":"One","closable":true},{"text":"Two","closable":true}] 
}); 

Dokumentation sagt, dass

verschließbare: Boolean bindable

Getreu der Tab verschließbare und zeigt das Schließen-Symbol

So zu machen Bei dieser Eigenschaft handelt es sich nicht nur um dieses Schließen-Symbol, sondern auch um dieses Verhalten zu schließen.

Das zweite Problem, dem ich gegenüberstehe, ist, dass es unmöglich ist, Registerkarten zu aktivieren, die über eine Tableiste zu einem Tabpanel hinzugefügt werden. Der Code ist auch sehr einfach:

Ext.create("Ext.tab.Panel",{ 
    renderTo: "two", 
    id: "test2", 
    items:[{"title":"One","closable":true},{"title":"Two","closable":true}], 
    listeners: { 
     render: function() { 
      this.getTabBar().add({"text":"Three"}); 
     } 
    } 
}); 

Versuchen Sie einfach, diese letzte Registerkarte zu aktivieren, und Sie werden fehlschlagen. Und wenn Sie auf dieser Registerkarte die Eigenschaft active festlegen, können Sie diese Registerkarte nicht deaktivieren. Also, wie können wir das alles reparieren?

Answer 1

TabBar wird intern von einem Ext.tab.Panel verwendet und sollte normalerweise nicht manuell erstellt werden.

Die Implementierung der Tableiste basiert auf der Tatsache, dass es sich um einen Teil eines Tab-Panels handelt. Wenn wir in seiner Quelle zu graben, werden wir, dass in der „closeTab“ Methodenimplementierung sehen es überprüft, ob es eine zugrunde liegende Karte ist zu schließen:

if (tabPanel && card) {... 

mit Bezug auf das zweite Verhalten, wenn Sie die „doActivateTab Check-Out „Methodenimplementierung, auch im Tabbar Quellcode, ist es das, was Sie sehen:

doActivateTab: function(tab) { 
    var tabPanel = this.tabPanel; 

    if (tabPanel) { 
     // TabPanel will call setActiveTab of the TabBar 
     if (!tab.disabled) { 
      tabPanel.setActiveTab(tab.card); 
     } 
    } else { 
     this.setActiveTab(tab); 
    } 
} 

Also, wenn es keine TabPanel ist, es wird nur die Registerkarte aktivieren, wenn es ist, wird es die TabPanel nennen“ setActiveTab "Wenn keine Karte gefunden wird, die an die zu aktivierende Registerkarte angehängt ist, wird die vorherige Registerkarte aktiviert.

Sie sollten nicht direkt auf die Fensterleiste hinzuzufügen, fügen Sie stattdessen auf die TabPanel:

this.add({"title":"Three"}); 

Answer 2

Hier ist ein Arbeits fiddle. Scheint so, als ob setactivetab nach dem Rendern sein muss.