ExtJS Modern——将按钮添加到网格单元

我有一个ExtJS 6.2现代应用程序。向网格单元添加按钮的正确方法是什么

我尝试使用列呈现器fn返回一个按钮，但我只看到呈现的HTML标记，而不是实际的元素。我还尝试使用“widgetcell”组件，该组件会呈现按钮，但不会呈现按钮文本

---

以您的小提琴为例，您可以制作如下小部件按钮

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

---

不使用widgetcell，您可以通过以下方式执行此操作：

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

或带面板

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

---

我想完成同样的任务，但我想我会包括一个更完整的例子。这是我遇到的第一个资源，所以我想我应该在这里发布

因此，对于我的问题，我只想传递数据并使用该数据渲染视图。为此，我在

网格中添加了一列，并在该列中添加了一个
widgetcell
。网格列需要一个
dataIndex
，但我的按钮与模型中的特定列没有关联，所以我只是为所需的值添加了一个不存在的列，该列有效

之后，您可以将
小部件
对象指定为单元格
配置
。您可以添加
处理程序
键并从网格访问记录对象，如下所示

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

谢谢你的指点。看起来按钮列需要映射到具有dataIndex的模型中的字段。