Ext JS Hinzufügen von Listener zur Schaltfläche dynamisch hinzugefügt

Question

Ich habe Schaltflächen dynamisch zu einer Symbolleiste hinzugefügt und jetzt versuche ich einen Listener hinzuzufügen, der das zentrale Fenster Panel ersetzen wird. Ich habe Probleme, den Hörer im Viewcontroller anzuschließen.

So habe ich es bisher gemacht. Kann mir jemand in die richtige Richtung weisen?

init: function() { 

    var dynamicMenu = []; 

    var me = this; 
    console.log(me); 
    console.log(this.view); 
    var myToolbar = this.view.down('toolbar'); 
    console.log(myToolbar); 

    this.getViewModel().data.mainmenuv4store.load(function (records) { 

     console.log('hit load section'); 

     Ext.each(records, function (record) { 

      //add individual button 
      var myButton = Ext.create('Ext.Button', { 
       text: record.get('text'), 
       iconCls: record.get('iconCls'), 
       iconAlign: 'left', 
       listeners: { 
        click: { 
         fn: function (event, target) { 
          me.selectMenuButton(event, target); 
         } 
        } 
       } 
      }); 

      myButton.on({ 
       click: 
      }); 

      //add button to menu array 
      dynamicMenu.push(myButton); 
     }); 

     //put this in storeLoad otherwise this section will be hit before loading everything 
     myToolbar.add(dynamicMenu); 

    }); 
}, 

selectMenuButton: function (event, target) { 

    Ext.Msg.alert('hi'); 

    var targetCmp = Ext.get(target); 
    var id = targetCmp.getAttribute('text'); 
} 

Ich änderte meinen Code in den folgenden. Habe ich das effizient eingerichtet?

Ext.define('ExtApplication1.controller.MainMenuV4ViewController', { 
extend: 'Ext.app.ViewController', 
alias: 'controller.mainmenuv4vc', 
views: [ 
    'ExtApplication1.view.main.MainMenuV4View' 
], 

init: function() { 

    var dynamicMenu = []; 

    var me = this; 
    console.log(me); 
    console.log(this.view); 
    var myToolbar = this.view.down('toolbar'); 
    console.log(myToolbar); 

    this.getViewModel().data.mainmenuv4store.load(function (records) { 

     console.log('hit load section'); 

     Ext.each(records, function (record) { 

      //add individual button 
      var myButton = Ext.create('Ext.Button', { 
       text: record.get('text'), 
       iconCls: record.get('iconCls'), 
       iconAlign: 'left', 
       handler: me.selectMenuButton, scope: me 
      }); 

      //add button to menu array 
      dynamicMenu.push(myButton); 
     }); 

     //put this in storeLoad otherwise this section will be hit before loading everything 
     myToolbar.add(dynamicMenu); 

    }); 

    //listeners: { 
    // click: 'onProjectSelect' 
    // //click: { 
    // // fn: function (event, target) { 
    // //  me.selectMenuButton(event, target); 
    // // } 
    // //} 
    //} 
}, 

selectMenuButton: function (event, target) { 

    //Ext.Msg.alert('select menu button method hit'); 

    console.log('select menu button section was hit') 
    console.log(event); 
    console.log(target); 

} 

Answer 1

Basierend auf Ihrem Kommentar zu der Frage, es sieht so aus, als ob Sie einen saubereren Weg, den Hörer zu etablieren wollen. Dies ist etwas sauberer:

Statt Zuhörer: {...}, verwenden

handler: Ext.Function.bind(me.selectMenuButton, me)