ExtJS Modern — add button to grid cell

Question

I have an ExtJS 6.2 modern app. What is the proper way to add a button to a grid cell?

I tried using the column renderer fn to return a button but I just see the HTML tags rendered, not the actual element. I also tried using the "widgetcell" component which does render the button but not the button text.

Fiddle.

Answer 1

Using your fiddle as an example, you can make a widget button like this

columns: [
    //other columns
    {
        dataIndex: 'description',
        flex: 1,
        cell: {
            xtype: "widgetcell",
            widget: {
                xtype: "button",
            }
        }
    }
]

Answer 2

You can do it without widgetcell by:

    {
        text: "Button Widget ",
        flex: 1,
        cell: {
            xtype: 'button',
            text: 'CLICK ME'
        }
    }

Or with panel

    {
        text: "Button Widget ",
        flex: 1,
        cell: {
            xtype: "widgetcell",
            widget: {
                xtype: 'panel',
                header: false,
                items: [{
                    xtype: 'button',
                    text: 'CLICK ME'
                }]
            }
        }
    }

Answer 3

I wanted to accomplish the same task but thought I would include a little more complete example. This was the first resource I came across so figured I should post here.

So for my problem I just wanted to pass the data and render a view utilizing that data.To do that I add a column to my grid and added a widgetcell inside that column. The grid column requires a dataIndex but my button wasn't associated with a specific column in my model, so I just added a non-existent column for the required value which worked.

After that you can specify a widget object as a cell config. You can add a handler key and access the record object from the grid like below.

{
                xtype: 'gridcolumn',
                flex: 1,
                width: 80,
                dataIndex: 'button',
                text: 'Details',
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'button',
                        text: 'View',
                        width: '100%',
                        handler: function(button,e){ 
                    let accountData = this.up().up()._record.data
                    console.log(accountData);}
                    }
                }
            }