trình nghe nhấp chuột cho bảng điều khiển tab trong EXTJS

Question

tôi sử dụng bảng điều khiển tab trong extjs. Tôi muốn hiển thị cảnh báo khi được nhấp vào tab. Nhưng tôi không chắc chắn làm thế nào.

Đây là những gì tôi làm bây giờ:

{ 
       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'); 
      } 
         } 
      } 

Làm thế nào có thể được hiển thị tất cả, đóng hoặc mở khi có được nhấp vào tab đó?

Answer 1

Không có sự kiện cho tab nhấp chuột trong TabPanel, tuy nhiên bạn có thể ràng buộc vào sự kiện click trên mỗi tab:

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

Chú ý: đây là ExtJS 4 dựa mã.

Answer 2

Tôi quản lý để thực hiện việc này bằng cách sử dụng sự kiện tabchange. Ví dụ dưới đây tôi đã sử dụng tài sản newCard.xtype giá trị của xtype (tức là task-archive) chỉ là bảng điều khiển của tôi có các điều khiển và thuộc tính xtype tương ứng.

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