Trong tabpanel của ExtJS 4, cách nắm bắt sự kiện tabchange bất cứ khi nào tôi nhấp vào một tab?

Question

Đối với mỗi tab trong tabpanel, tôi có một bảng nổi nằm ở vị trí cố định. Khi tôi chuyển đổi các tab, tôi cần phải mang bảng điều khiển nổi tương ứng về phía trước. Tuy nhiên, sự kiện tabchange chỉ được kích hoạt lần đầu tiên. Làm thế nào tôi có thể nắm bắt được tabchange này hoặc sự kiện tương tự khác khi tôi nhấp vào một tab?

Alexey, Đây là mã ví dụ của tôi với những câu hỏi cụ thể hơn:

Ext.onReady(function() { 
    panel1 = Ext.create('Ext.panel.Panel', { 
     title: 'title1', width: 800, height: 50, 
     listeners: { 'beforeshow': { fn: function() { 
      console.log("beforeshow on title1"); 
     }, scope: this, single: true } } 
    }); 
    panel2 = Ext.create('Ext.panel.Panel', { 
     title: 'title2', width: 800, height: 50, 
     listeners: { 'beforeshow': { fn: function() { 
      console.log("beforeshow on title2"); 
     }, scope: this, single: true } } 
    }); 
    panel3 = Ext.create('Ext.panel.Panel', { 
     title: 'title3', width: 800, height: 50, 
     listeners: { 'beforeshow': { fn: function() { 
      console.log("beforeshow on title3"); 
     }, scope: this, single: true } } 
    }); 
    var tabpanel = Ext.createWidget('tabpanel', { 
     renderTo: document.body, 
     activeTab: 0, 
     width: 800, height: 50, plain: true, 
     items: [panel1, panel2, panel3], 
     listeners: { 
      'tabchange': { fn: function() { 
       console.log("tabchange"); 
      }, scope: this, single: true } 
     } 
    }); 
}); 

Các "tabchange" tin nhắn chỉ in một lần. Điều tôi thực sự muốn là hiển thị thông báo "beforeshow on ..." mỗi khi tôi nhấp vào một tab.

Leoh, bạn là người đàn ông! Nó bật ra vấn đề trong mã của tôi là "fn". Mã sau hoạt động hoàn hảo bằng cách xóa "fn", "scope" và "single". Tôi không biết tại sao. Ai có thể giải thích?

Ext.onReady(function() { 
    panel1 = Ext.create('Ext.panel.Panel', { 
     title: 'title1', width: 800, height: 50, 
     listeners: { 'beforeshow': function() { console.log("beforeshow on title1"); } } 
    }); 

    panel2 = Ext.create('Ext.panel.Panel', { 
     title: 'title2', width: 800, height: 50, 
     listeners: { 'beforeshow': function() { console.log("beforeshow on title2"); } } 
    }); 

    panel3 = Ext.create('Ext.panel.Panel', { 
     title: 'title3', width: 800, height: 50, 
     listeners: { 'beforeshow': function() { console.log("beforeshow on title3"); } } 
    }); 

    var tabpanel = Ext.createWidget('tabpanel', { 
    renderTo: document.body, 
    activeTab: 0, 
    width: 800, 
    height: 50, 
    plain: true, 
    items: [panel1, panel2, panel3], 
    listeners: { 
     'tabchange': function() { 
      console.log("tabchange"); 
     } 
    } 
    }); 
}); 

Answer 1

hãy kèm theo một chức năng để kiện tabchange

Ext.onReady(function() { 
    panel1 = Ext.create('Ext.panel.Panel', { 
     title: 'title1' 


    }); 
    panel2 = Ext.create('Ext.panel.Panel', { 
     title: 'title2' 

    }); 
    panel3 = Ext.create('Ext.panel.Panel', { 
     title: 'title3' 

    }); 
    var tabpanel = Ext.createWidget('tabpanel', { 
     renderTo: document.body, 
     activeTab: 0, 
     width: 800, 
     height: 50, 
     plain: true, 
     items: [panel1, panel2, panel3], 
     listeners: { 
      'tabchange': function (tabPanel, tab) { 
       console.log(tabPanel.id + ' ' + tab.id); 
      } 
     } 
    }); 
}); 

Live Demo Here

Answer 2

Bạn có thể thử sử dụng beforeshow sự kiện trên các tấm đó đang được hiển thị sau khi thay đổi tab