W tabpanel ExtJS 4, jak złapać zdarzenia tabchange w dowolnym momencie klikam kartę?

Question

Dla każdej zakładki na tabpanelu, mam jeden panel pływający umieszczony w ustalonym miejscu. Kiedy przełączam karty, muszę przynieść odpowiedni panel pływający z przodu. Jednak zdarzenie tabchange jest uruchamiane tylko za pierwszym razem. Jak mogę złapać tę zmianę tabulatora lub inne podobne zdarzenie po kliknięciu karty?

Alexey, Oto mój przykładowy kod z bardziej szczegółowych pytań:

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

komunikat "tabchange" drukuje tylko raz. To, czego naprawdę chcę, to pokazać komunikat "beforeshow on ..." za każdym razem, gdy klikam kartę.

Leoh, jesteś mężczyzną! Okazało się, że problemem w moim kodzie jest "fn". Poniższy kod działa doskonale, usuwając "fn", "zakres" i "pojedynczy". Nie wiem dlaczego. Czy ktoś może wyjaśnić?

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

Proszę załączeniu funkcji do zdarzenia 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

Można spróbować użyć beforeshow wydarzeń na panelach, które są pokazane po zmianie zakładki