In the tabpanel of ExtJS 4, how to catch the tabchange event anytime I click a tab?

Question

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

Alexey, Here is my example 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 just prints once. What I really want is to show the message "beforeshow on ..." everytime I click a tab.

Leoh, you are the man! It turned out the problem in my code is the "fn". The following code works perfectly by removing "fn", "scope", and "single". I don't know why though. Can anybody 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");
        }
    }
  });
});

Rental

"the tabchange event is fired only the first time" - are you sure? May you please post your code example? – Annamariaannamarie

please accept the desired answer below to mark this question answered. – Preference

Answer 1

Please attached a function to event 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

Untouchable

Great! Problem is solved. It worked by removing "fn", "scope", "single" in my example code. That's the difference between your code and mine. – Rental

Answer 2

You can try using beforeshow events on the panels that are being shown after tab change

Preference

As shown in my example below, the "beforeshow" event is fired just the first time. – Rental