Extjs Grid mit rowbody buttons handler

Question

Ich habe ein Gridpanel in extjs 4.2.1, auf dem ich die ftype rowbody verwenden, um zusätzliche Elemente zu jeder Zeile hinzuzufügen. In diesem Fall füge ich jeder Zeile eine Reihe von Knöpfen (Tags) hinzu.

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

So die Tags zeigen richtig in der Reihe, aber ich würde eine wie Zuhörer hinzufügen (klicken Handler) auf diese einzelnen Tags. Ist dies mit rowbody möglich oder sollte ich diese Tags mit einer anderen Methode hinzufügen?

Answer 1

Ja, Sie können Klickhandler mit einem globalen Bereich hinzufügen. Mein Vorschlag ist, einen statischen Handler für Ihre Rasterklasse zu definieren:

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