如何在网格面板的列编辑器中呈现不同的文本（ExtJs6.0.2）

Question

我有一个网格，其中有一列的编辑器配置为文本字段。

var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            itemId: 'gridPanel123',
            store: store,
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield'
                }
            }]
});

假设该列看起来像这样，

很明显该列的值是ABCDE。现在当用户点击该列时，编辑器模式会弹出如下内容：

现在我的问题是，是否有任何类型的渲染器可以根据列的值更改编辑器的内容。

考虑到我的示例，列值为“ABCDE”，因此编辑器值也为“ABCDE”。

但是如果我想用编辑器中的 'Z' 替换列中的所有 'A' 怎么办。所以我的编辑器值应该是 'ZBCDE'。这在 extjs 中怎么可能？

Answer 1

您可以通过在单元格编辑插件的 beforeEdit 事件中设置值来实现。

cellediting: {
     listeners: {
          beforeEdit: function (editor, context) {
               context.value = context.value.replace("A", "Z");
          }
     }
}

要确定应该替换哪一列，只需添加检查：

if(context.column.dataIndex == 'name'){
    context.value = context.value.replace("A", "Z");
}

反向替换试试：

validateEdit: function (editor, context){
    context.record.set('name', context.value.replace("Z", "A"));
    context.record.commit();
}

fiddle 上的示例：https://fiddle.sencha.com/#view/editor&fiddle/2thq。

如何在网格面板的列编辑器中呈现不同的文本（ExtJs6.0.2）

How to render the text in the editor of column of grid panel differently(ExtJs6.0.2)

javascript

user-interface

extjs

extjs6-classic