如何處理ExtJS6中控制器中的body元素事件？

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); 
    }, 
});