javascript - 如何在网格面板的列编辑器中呈现不同的文本(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 .