How to add a button to a grid table column in extjs?

Question

When a new line is created, one field should contain a button dynamically created in Extended JS.

Each button should contain a different name and action listener. The column should be displayed on the image.

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!"); } } ] } ] } 

Nex Attempt:

 { 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

I insert my ore in (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

I think this is the best way to add a button to the grid column when rendering

 { 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); } } ] }