extjsのグリッドビュー列にボタンを追加するには？

Question

新しい行が作成されると、1つのフィールドに拡張JSで動的に作成されたボタンが含まれているはずです。

各ボタンには、異なる名前とアクションリスナーが含まれている必要があります。 列は画像で与えられるのが好きです。

Answer 1

{ 
    xtype: 'gridpanel', 
    columns: [ 
     {text: 'NAME', dataIndex: 'name', width: 100}, 
     {text: 'SURNAME', dataIndex: 'surname', width: 100}, 
     { 
      text: 'DELETE', 
      align: 'center', 
      xtype: 'actioncolumn', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'DELETE ME', 
        scale: 'small', 
        handler: function() { 
         alert("Hello World!"); 
        } 
       } 
      ] 
     } 
    ] 
} 

ネックスの試み：

{ 
    xtype: 'gridpanel', 
    columns: [ 
     {text: 'NAME', dataIndex: 'name', width: 100}, 
     {text: 'SURNAME', dataIndex: 'surname', width: 100}, 
     { 
      renderer: function(val,meta,rec) { 
      // generate unique id for an element 
      var id = Ext.id(); 
      Ext.defer(function() { 
       Ext.widget('button', { 
        renderTo: id, 
        text: 'DELETE', 
        scale: 'small', 
        handler: function() { 
         Ext.Msg.alert("Hello World") 
        } 
       }); 
      }, 50); 
      return Ext.String.format('<div id="{0}"></div>', id); 
      } 
     } 
    ] 
} 

Answer 2

私は（ExtJSに5.1）で私の鉱石を固執：

{ 
    xtype: 'gridpanel', 
    columns: [ 
     {text: 'NAME', dataIndex: 'name', width: 100}, 
     {text: 'SURNAME', dataIndex: 'surname', width: 100}, 
     { 
      text: 'DELETE', 
      align: 'center', 
      stopSelection: true, 
      xtype: 'widgetcolumn', 
      widget: { 
        xtype: 'button', 
        _btnText: "myRandomText", 
        defaultBindProperty: null, //important 
        handler: function(widgetColumn) { 
         var record = widgetColumn.getWidgetRecord(); 
         console.log("Got data!", record); 
        }, 
        listeners: { 
         beforerender: function(widgetColumn){ 
          var record = widgetColumn.getWidgetRecord(); 
          widgetColumn.setText(widgetColumn._btnText); //can be mixed with the row data if needed 
         } 
        } 
      } 
     } 
    ] 
} 

Answer 3

私は、これはするための最良の方法だと思いますグリッドの列にボタンを追加する[actionColumn：

{ 
    xtype: 'gridpanel', 
    columns: [ 
     {text: 'name'}, 
     { 
      text: 'add', 
      align: 'center', 
      renderer: function(value, meta, record) { 
       var id = Ext.id(); 
       Ext.defer(function(){ 
        new Ext.Button({ 
         text: 'add', 
         handler : function(btn, e) { 
          // do whatever you want here 
         } 
        }).render(document.body, id); 
       },50); 
       return Ext.String.format('<div id="{0}"></div>', id); 
      } 
     } 
    ] 
}