Extjs grid с обработчиком кнопок rowbody

Question

У меня есть gridpanel в 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' 
    }],