Nel pannello di dialogo di ExtJS 4, come catturare l'evento tabchange ogni volta che faccio clic su una scheda?

Question

Per ogni scheda nel pannello delle schede, ho un pannello mobile posizionato in un punto fisso. Quando cambio le schede, devo portare in primo piano il pannello mobile corrispondente. Tuttavia, l'evento tabchange viene generato solo la prima volta. Come posso prendere questo tabchange o un altro evento simile quando faccio clic su una scheda?

Alexey, Qui è il mio codice di esempio con domande più specifiche:

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

il messaggio "tabchange" si limita a stampare una volta. Quello che voglio veramente è mostrare il messaggio "beforeshow on ..." ogni volta che clicco una scheda.

Leoh, tu sei l'uomo! Si è scoperto che il problema nel mio codice è "fn". Il seguente codice funziona perfettamente rimuovendo "fn", "scope" e "single". Non so perché però. Qualcuno può spiegare?

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

attaccato prego una funzione per tabchange evento

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

Puoi provare a utilizzare beforeshow eventi sui pannelli che vengono visualizzati dopo il cambio scheda