如何在 Extjs 的网格行中添加一个按钮？

Question

目前，我正在使用 XML 文件为我的网格填充数据。

我的 XML 文件是这样的

<property>
    <category>Email</category>
    <name>To-address</name>
    <value>abc@xyz.com</value>
</property>   

<property>
    <category>Email</category>
    <name>From-address</name>
    <value>abc@xyz.com</value>
</property>
<property>
    <category>Email</category>
    <name>Email-body</name>
    <value>My Body</value>
</property>
<property>
    <category>Email</category>
    <name>Password</name>
    <value>1234</value>
</property>

我正在像这样填充我的网格：

{
    xtype: 'grid',
    columns: [{
            text: 'Name',
            width: 100,
            dataIndex: 'name'
        }, {
            text: 'Value',
            dataIndex: 'value',
            flex: 1,
            getEditor: function(record) {
                if (record.get('name') === 'password') {
                    return Ext.create('Ext.grid.CellEditor', {
                        field: Ext.create('Ext.form.field.Text', {
                            inputType: 'password'
                        })
                    })
                    else if (record.get('name') === 'Content') {
                        return Ext.create('Ext.grid.column.Action', {
                            width: 50,
                            items: [{
                                iconCls: 'x-fa fa-cog',
                                tooltip: 'Edit',
                                handler: function(grid, rowIndex, colIndex) {
                                    alert('Hello World');
                                }
                            }]
                        });
                    } else {
                        return Ext.create('Ext.grid.CellEditor', {
                            field: Ext.create('Ext.form.field.Text', {})
                        })
                    },
                    renderer: function(value, meta, rec) {
                        if (record.get('name') === 'password') {
                            value = '***';
                        }
                        return value;
                    }

                }
            }
        ],
        selType: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
        }
    }
}

我想在内容行中添加一个按钮作为值，这将弹出一个窗口，以便在单击时向用户添加电子邮件正文。

这是我尝试过的。它能够添加一个处理程序正常工作的按钮，但它隐藏了其他网格值列数据

if (record.get('name') === 'Content') {
    var id = Ext.id();
    Ext.defer(function() {
        Ext.widget('button', {
            renderTo: id,
            text: 'Edit',
            width: 100,
            handler: function(record) {
                alert("Hello world");
            }
        });
    }, 50);
    return Ext.String.format('<div id="{0}"></div>', id);
}

作为初步步骤，我想选中我正在添加内容的操作列的警告框。但它没有出现在行中。

我在这里缺少什么来向网格行添加一个按钮？

Answer 1

编辑器是在列上定义的，在您的情况下，该列的类型为gridcolumn（默认列类型）并通过隐式定义

 text: 'Value',
 dataIndex: 'value',
 flex: 1,

列的函数getEditor() 应该返回一个编辑器组件，其中的字段派生自Ext.form.field.Base。

但是，您有时会从 getEditor 返回一个列组件：

 getEditor: function(record){
     ...
     else if(record.get('name') === 'Content') {
          return Ext.create('Ext.grid.column.Action', {
          ...

这不起作用，因为它是错误的组件类型。此外，您的列具有固定类型，并且您无法使列的单个单元格表现得像不同的列类型，除非手动覆盖渲染器。我没有看到快速解决此问题的方法。您可能会返回一个编辑器，其中包含一个带有触发按钮的文本字段。

但是，我建议您为您的数据使用form，这样更合适。在这种形式中，您可以将按钮放置在任何您想要的位置。