在EXTJS中的標籤面板單擊監聽器

Question

我在extjs中使用了一個標籤面板。我想在點擊標籤時顯示警報。但我不知道如何。

這就是我現在做的事：

{ 
       xtype: 'tabpanel', 
       activeTab: 0, 
       region: 'center', 
       items: [ 
        { 
         xtype: 'panel', 
         title: 'All', 
         items: [grid] 

        }, 
        { 
         xtype: 'panel', 
         title: 'Closed' 
        }, 
        { 
         xtype: 'panel', 
         title: 'Open' 
        } 
       ], 
       listeners: { 
      click: function() { 
       alert('test'); 
      } 
         } 
      } 

如何被顯示完畢，關閉或當單擊該選項卡上打開？

Answer 1

有在TabPanel選項卡上單擊任何情況下，但是你可以綁定到click事件中每個選項卡上：

Ext.createWidget('tabpanel', { 
    items: [...], 
    listeners: { 
     render: function() { 
      this.items.each(function(i){ 
       i.tab.on('click', function(){ 
        alert(i.title); 
       }); 
      }); 
     } 
    } 
}); 

注意：這是ExtJS的4基於代碼。

Answer 2

我設法通過使用tabchange事件來做到這一點。在下面的示例中，我使用了newCard.xtype屬性，其中xtype的值（即task-archive）就是我的面板，其中包含控件和相應的xtype屬性。

Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     this.control({ 
      '#tabWorks': { 
       tabchange: this.doTest 
      } 
     }); 
    }, 

    doTest: function (tabPanel, newCard, oldCard, eOpts) { 
     switch (newCard.xtype) { 
      case "task-archive": 
       console.log("task-archive"); 
       break; 
      case "task-creation": 
       console.log("task-creation"); 
       break; 
     } 
    } 
});