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에서 탭을 클릭에 대한 이벤트가 없습니다 :

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 이벤트를 사용하여이 작업을 관리합니다. 아래 예에서 xtype 값 (즉, task-archive)이 컨트롤과 해당 xtype 속성이있는 내 패널 인 newCard.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; 
     } 
    } 
});