ExtJS 4 के टैबपैन में, जब भी मैं टैब पर क्लिक करता हूं तब टैबबल ईवेंट को कैसे पकड़ें?

Question

टैबपैनल में प्रत्येक टैब के लिए, मेरे पास एक निश्चित स्थान पर स्थित एक फ़्लोटिंग पैनल है। जब मैं टैब स्विच करता हूं, तो मुझे संबंधित फ़्लोटिंग पैनल को सामने ले जाना होगा। हालांकि, टैबलेट इवेंट केवल पहली बार निकाल दिया जाता है। जब मैं एक टैब पर क्लिक करता हूं तो मैं इस टैबलेट या अन्य समान घटना को कैसे पकड़ सकता हूं?

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 चालू ..." दिखाएं।

लिह, आप आदमी हैं! यह पता चला कि मेरे कोड में समस्या "एफएन" है। निम्न कोड "एफएन", "स्कोप" और "सिंगल" को हटाकर पूरी तरह से काम करता है। मुझे नहीं पता क्यों यद्यपि। क्या कोई समझा सकता है?

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

घटना 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

आप पैनल पर घटनाओं टैब बदलाव के बाद दिखाए जा रहे हैं