На панели вкладок ExtJS 4, как перехватывать событие смены вкладок каждый раз, когда я нажимаю вкладку?

Для каждой вкладки на панели вкладок у меня есть одна плавающая панель, расположенная в фиксированном месте. Когда я переключаю вкладки, мне нужно вывести соответствующую плавающую панель на передний план. Однако событие 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");
        }
    }
  });
});