Как связать событие onclick с элементом XTemplate extjs?

Question

Я очень не знаком с extjs. Я хочу вызвать событие onclick, как только я нажму на div, Ниже приведен код. Пожалуйста, помогите, заблаговременно.

var resultTemplate = new Ext.XTemplate(
       '<tpl for=".">', 
        '<div class="list-item" id={value}>', 
         '<i class="folder-icon">&nbsp;</i>', 
         '{value}', 
        '</div>', 
       '</tpl>' 
); 


    Ext.define('abc.view.xyz', { 
    layout : { 
        type: 'border', 
        padding: 5 
       }, 
    extend : 'Ext.Panel', 
    alias : 'widget.infraTab', 
    id  : 'infraTab', 
    margin : '10 10 10 10', 
    border : true, 
    items : Ext.create('Ext.view.View', { 
        store: store, 
        tpl:resultTemplate 
      }) 
}); 

Я хочу DIV с классом "list-item" щелкнул и значение его идентификатору.

Answer 1

Вы должны быть в состоянии использовать itemclick слушателя:

Ext.create('Ext.view.View', { 
    store: store, 
    tpl: resultTemplate, 
    itemSelector: '.list-item', 
    listeners: { 
     itemclick: function(view, record, item, index, e, eOpts) { 
      alert(record.get('value')); 
     } 
    } 
}); 

Вот это Sencha Fiddle демонстрирует его использование.

Answer 2

Когда вы НЕ используя View то itemSelector не доступен, в таких случаях вы можете сделать что-то вроде:

afterRender: function() { 
     this.callParent(arguments); 

     this.el.select('.item', true) 
      .elements 
      .forEach((item) => 
       item.on('click', (e, element) => { 
         this.fireEvent('itemclick'); 
        } 
       ) 
      ); 
    }