在ExtJS 4的tabpanel中，如何在任何時候點擊選項卡來捕捉tabchange事件？

對於Tabpanel中的每個選項卡，我有一個位於固定位置的浮動面板。當我切換標籤時，我需要將相應的浮動面板放在前面。但是，tabchange事件僅在第一次觸發。當我點擊一個標籤頁時，如何捕捉這個tabchange或其他類似的事件？在ExtJS 4的tabpanel中，如何在任何時候點擊選項卡來捕捉tabchange事件？

阿列克謝，這裏是我的示例代碼更具體的問題：

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

的「tabchange」消息只是打印一次。我真正想要的是每次點擊一個標籤時顯示消息「beforeshow on ...」。

李，你是男人！原來我的代碼中的問題是「fn」。下面的代碼通過刪除「fn」，「scope」和「single」完美地工作。我不知道爲什麼。有人可以解釋嗎？

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

來源

2013-01-31 skywang

「的tabchange功能事件只是第一次被解僱「 - 你確定嗎？你可以發佈你的代碼示例嗎？ –

請接受以下所需的答案，以標記回答此問題。 – dbrin

請連接到事件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

來源

2013-02-01 16:17:31 leoh

太棒了！問題解決了。它通過去除示例代碼中的「fn」，「scope」，「single」來工作。這是你的代碼和我的區別。 – skywang

您可以嘗試使用beforeshow面板上的事件正在標籤更改後顯示

來源

2013-01-31 21:52:53 dbrin

正如以下示例所示，「beforeshow」事件是第一次觸發。 – skywang

在ExtJS 4的tabpanel中，如何在任何時候點擊選項卡來捕捉tabchange事件？

回答

相關問題