ExtJS6のコントローラで本体要素のイベントを処理する方法は？

Question

私は、カスタム<span>要素を列の中にレンダリングする基本的なグリッドパネルを持っています。私はこの要素のクリックイベントを捕まえて、それらをコントローラで処理しようとしています。

問題は、リスナー内でthisがWindowを参照しているため、イベントを発生させることもできません。

Ext.define('MyList', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'mylist', 
    controller: 'mylist', 

    listeners: { 
     body: { 
      click: function(e, el){ 
       //this.fireEvent('onTagClick'); 
      }, 
      delegate: 'span.tag', 
      scope: this 
     }, 
    }, 

    columns: [ 
     { 
      text: 'Name', 
      dataIndex: 'name', 
      renderer: function(value, metaData, record){ 
       return '<span class="tag">tag</span>' + value; 
      } 
     }, 
    ] 
}); 

私はExt.GlobalEvents.fireEvent()でグローバルなイベントを発生することができますが、グリッドがリロードされます後に重複イベントの呼び出しでいくつかの奇妙な問題やバグに実行しています。グローバルな出来事を避ける方法があるかどうかを見たいと思っています。

Answer 1

はthisがコントローラを指すであろう、コントローラから直接リスナーを取り付けることによって、一つの解決策が見つかりました：

Ext.define('MyListController', { 
    alias: 'controller.mylist', 

    init: function(){ 
     this.getView().on({ 
      body: { 
       click: function(e, el){ 
        this.onTagClick(el); 
       }, 
       delegate: 'span.tag', 
       scope: this 
      }, 
     }); 
    }, 

    onTagClick: function(el) { 
     console.log("clicked", el); 
    }, 
});