Extjs網格與rowbody按鈕處理程序

Question

我在extjs 4.2.1中有一個網格面板，我在其上使用ftype rowbody向每一行添加其他元素。在這種情況下，我正在爲每行添加一行按鈕（標籤）。

features: [{ 
      ftype: 'rowbody', 
      getAdditionalData: function(data, idx, record, orig) { 
       var headerCt = this.view.headerCt 
       var colspan = headerCt.getColumnCount() 
       var rowData = '' 
       record.data.tags.forEach(function(tag) { 
        rowData += '<button class="tagDiv">' + tag.name + '</button>' 
       }) 

       // Usually you would style the my-body-class in CSS file 
       return { 
        rowBody: rowData, 
        rowBodyCls: 'tagRow', 
        rowBodyColspan: colspan 
       } 
      } 
     }, { 
      ftype: 'rowwrap' 
     }], 

所以標籤在行中正確顯示，但我想添加監聽器（點擊處理程序）到這些單獨的標籤。這是可能的使用rowbody或者我應該使用其他方法添加這些標記

Answer 1

是的，您可以添加使用某些全局範圍的點擊處理程序。我的建議是爲您的網格類定義一個靜態處理程序：

Ext.define('MyApp.view.MyGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'orderlinesgrid', 
    requires: [ 
     'Ext.grid.feature.RowBody' 
    ], 

    statics: { 
     onTagClick: function(btn, tag) { 
      // Click handler code... 
     } 
    } 

    features: [{ 
     ftype: 'rowbody', 
     getAdditionalData: function(data, idx, record, orig) { 
      var headerCt = this.view.headerCt 
      var colspan = headerCt.getColumnCount() 
      var rowData = '' 
      record.data.tags.forEach(function(tag) { 
       rowData += '<button class="tagDiv" onclick="MyApp.view.MyGrid.onTagClick(this,\'' + tag.name + '\')">' + tag.name + '</button>' 
      }) 

      // Usually you would style the my-body-class in CSS file 
      return { 
       rowBody: rowData, 
       rowBodyCls: 'tagRow', 
       rowBodyColspan: colspan 
      } 
     } 
    }, { 
     ftype: 'rowwrap' 
    }],