Geek Answers Handbook

In ExtJS 4 tab, how to catch tabchange event anytime when I click the tab?

For each tab in the tabpanel, I have one floating panel located in a fixed location. When I switch tabs, I need to bring the corresponding floating panel to the front. However, the tabchange event is fired only for the first time. How can I catch this tab or other similar event when I click the tab?

Alexey, Here is my sample code with more specific questions:

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

The tabchange message simply prints once. I really want to show the message "beforeshow on ..." every time I click a tab.

Leo, you are a man! It turned out that the problem in my code is "fn". The following code works fine by removing "fn", "scope" and "single". However, I do not know why. Can someone explain?

 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"); } } }); });
+6
source share
2 answers

Please attach the function to the event board

 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

+8
source

You can try using forforeshow events on the panels that appear after changing the tab.

+1
source

More articles:


All Articles