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

Question

I have grid with a column that has an editor configured as text field.

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'
                }
            }]
});

Say the column looks something like this,

Clearly the value of the column is ABCDE. Now when the user clicks on the column, the editor mode pops up something like this :

Now my question is, is there any kind of renderer that would change the content of the editor based on the value of the column.

Considering my example, column value is "ABCDE", so the editor value is also coming as "ABCDE".

But what if I want to replace all 'A' in the column with 'Z' in the editor .So the editor value for me should have been 'ZBCDE'. How is this possible in extjs?

Answer 1

You can do it by setting value in beforeEdit event in cell editing plugin.

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

To determine which column should be replaced just add check:

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

To reverse replace try :

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

Example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2thq.