テンプレート内の複数の要素にクリックハンドラを適用する方法-EXTJS

Question

divタグ内のspanタグにクリックイベントを適用したいとします。

items: [ 

     tpl: new Ext.XTemplate(
     '<div class="test"> Hello world<span class="icon-gear"></span></div>' 
     ), 
     listeners: { 
      'afterrender': function(this) { 
       this.el.on('click', this.onClick, this, { delegate: '.test' }); 
      }, 
      'click': function() { this.onSpanClick() } 

     }] 

と以下のクリック機能である：

上記のケースでは、今

onClick: function (e) { 
    //some stuff here 
}, 

onSpanClick: function() { 
//some stuff here 
} 

、コンテナclass="test"をクリックしたとき、それはのonClick（に入る）と、期待通りに動作します。ただし、span要素をクリックすると、onSpanClick()に行くのではなく、onClick()に移動します。 さまざまな要素からのクリックを区別する方法はありますか？

ありがとうございます！

Answer 1

xtypeにデリゲートイベントを作成できます。それは私を助け...
https://fiddle.sencha.com/#view/editor&fiddle/1mcv

Ext.create('Ext.DataView', { 
renderTo: Ext.getBody(), 
tpl: new Ext.XTemplate(
    '<div class="test"> Hello world<span class="icon-gear"> span Text</span></div>' 
), 
itemSelector: 'div.test', 
listeners: { 
    click: { 
     element: 'el', 
     delegate: 'div.test,span.icon-gear', 
     fn: function (eopts) { 
      var getClassList = eopts.target.classList; 
      console.log(getClassList); 
      if (getClassList.contains('test')) { 
       alert('Clicked on Test div'); 
      } else if (getClassList.contains('icon-gear')) { 
       alert('Clicked on span'); 
      } 

     } 
    } 
} 
});