EXTJS добавить fireEvent к динамически созданным элементам с помощью tpl

Question

У меня есть массив объектов, которые я применяю к html, используя новый Ext.XTemplate, а затем я использую результат как свой html для панели. Когда я нажимаю кнопку, все отлично работает с делегатом.

Вопрос:

Как я могу добавлять события в динамически добавленные кнопки, так что я могу использовать их в контроллере?

  initComponent : function(){ 
      var me = this; 

     var data = [{ 
       caption : 'Dashboard',  
       myclass : 'dashboard' 
      },{ 
       caption : 'clients', 
       myclass : 'clients' 
      }]; 


    var myTpl = new Ext.XTemplate(
    '<table><tr>', 
    '<tpl for="."><td>', 
    '<div style="width:200px;background-color:#004544;" class="thumb-wrap">', 
     '<button style="color:#fff;cursor:pointer;" class="{myclass}">{caption}</button>', 
'</div></td>', 
'</tpl></tr></table>'); 


    var htmlApplied = myTpl.apply(data); 


    this.items = [{ 
     xtype : 'panel', 
     html : htmlApplied, 
     scope : me, 
     listeners : { 
      el: { 
       delegate: 'button', 
       click: function(clickcmp, button) { 
        console.log(clickcmp); 
        console.log(button); 

        switch(button.className){ 
         case 'dashboard': 
         this.fireEvent('menuload'); 


         break; 
         case 'clients': 
         //alert('clients'); 
         break; 

        } 

       } 
      } 
     } 
    }] 

    this.addEvents({ 
     menuload: true   
    }); 
     } 

/* ****контроллер ****/

 Ext.define("Something.Control",{ 

     extend : 'Ext.app.Controller', 

      refs : [], 

     init : function(){ 
     this.control({ 
     'selector' : { 
      menuload: this.activateMenu 
     }  
     }); 
     }, 

     activateMenu : function(){ 

     } 

    });  

Answer 1

Предполагая, что selector соответствует код компонента, который был добавлен выше, чем вы пропустили это scope на слушателя. По умолчанию область по умолчанию будет отображаться на внутренней панели. scope: me должен опускаться внутри эл-блока:

el: { 
    scope: this, 
    delegate: 'div' 
}