Extjs 4 Panneau d'onglets Designer 1.2

Question

Je travaille avec ExtJs 4.0 (Ext Designer 1.2.0). J'ai un panneau avec la disposition de carte qui contient un bouton (ajouter l'étiquette btn) et un panneau à onglets. Chaque onglet contient une barre d'outils séparée avec bouton. Ajouter un onglet btn ajouterait Tab2 s'il est fermé.

J'ai observé que lorsque j'exécute l'application, l'événement sur le bouton du 2ème onglet peut être exécuté mais si je ferme le second onglet et l'ajoute dynamiquement à partir de l'onglet add btn, l'événement ne sera pas exécuté.

Des suggestions?

Après mon code: (MyPanel.js)

Ext.define('MyApp.view.MyPanel', { 
    extend: 'MyApp.view.ui.MyPanel', 

    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 

    me.down('button[id=addTab]').on('click',me.onAddTabClick,me); 
    me.down('button[text=Second Button]').on('click',me.onSecondBtnClick,me); 
    }, 

    onSecondBtnClick: function(){ 
     alert("Second Btn"); 
    }, 

    onAddTabClick: function(){ 

     var myTab = this.down('#myTabPanel').child('#tab2'); 
     if (myTab) { 
      myTab.show(); 
     } else { 
      this.down('#myTabPanel').add({ 
        title : 'Tab2', 
        activeTab: 0, 
        closable : true , 
        id: 'tab2', 
        items: [{ 
         xtype: 'panel', 
         id: 'tab2', 
         closable: true, 
         title: 'Tab 2', 
         dockedItems: [ 
          { 
           xtype: 'toolbar', 
           height: 29, 
           id: 'Tab2Toolbar', 
           dock: 'top', 
           items: [ 
            { 
             xtype: 'button', 
             text: 'Second Button' 
            } 
           ] 
          } 
         ] 
        }] 
       }).show(); 
     } 
    } 
}); 

Answer 1

Je devine que parce que vous utilisez initComponent au lieu de init, l'événement ne s'appliqué qu'une seule fois, quand MyPanel est d'abord chargé. Si vous utilisez à la place init config, je crois qu'il applique correctement vos événements si le bouton a déjà été détruit ou non.

En bref, essayez de supprimer votre bloc initComponent et le remplacer par cela, comme init est le « approprié » ExtJS 4 voies pour la mise en place d'événements:

init: function(){ 
    this.control({ 
    'button[id=addTab]': { 
     click: this.onAddTabClick 
    }, 
    'button[text=Second Button]':{ 
     click : this.onSecondBtnClick 
    } 
    }); 
} 

(Ce code est d'un contrôleur, pas spécifiquement un panneau, alors même si j'espère que cela fonctionne tout de suite, gardez à l'esprit que cela peut nécessiter des modifications.) N'oubliez pas votre virgule!)