如何在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 。 在这种形式下，您可以将按钮放置在任何需要的地方。