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' 
    }],