ExtJS Modern——向网格单元添加按钮答案

【问题标题】：ExtJS Modern -- add button to grid cellExtJS Modern——向网格单元添加按钮
【发布时间】：2025-12-14 01:35:02
【问题描述】：

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

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

【问题讨论】：

标签： extjs

【解决方案1】：

以你的小提琴为例，你可以像这样制作一个小部件按钮

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

【讨论】：

感谢您的指点。看起来按钮列需要使用 dataIndex 映射到模型中的字段。

【解决方案2】：

你可以通过以下方式在没有 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'
                }]
            }
        }
    }

【讨论】：

【解决方案3】：

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

因此，对于我的问题，我只想传递数据并使用该数据呈现视图。为此，我在grid 中添加了一个列，并在该列中添加了一个widgetcell。网格列需要dataIndex，但我的按钮未与模型中的特定列相关联，因此我只是为所需的值添加了一个不存在的列。

之后，您可以将widget 对象指定为单元格config。您可以添加 handler 键并从网格中访问记录对象，如下所示。

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

【讨论】：