Extjs : Change grid cell value on every change of another cell in the same row

Question

I am working on extjs Grid panel which has 2 columns as shown in the below fig.

My requirement is to change "Short Name" cell value on every change of corresponding "Task Description" cell value. I have used editor for "Task Description" column as shown below.

columns: [
    { 
        text: 'Task Description',  
        dataIndex: 'TaskDescription', 
        flex : 1.5, 
        editor: {
            xtype : 'textarea', 
            allowBlank : false,
            listeners : {
                change : function(field, e) {
                    var text = field.value;
                    if(text.length <= 26 && !text.match(/[.:-]/)) {
                        if(text.length == 26) {
                            text = text[25]==' ' ? text : text.substring(0, text.lastIndexOf(' '));
                        } 
                        //code to set short name cell value.
                    }
                }
            }
        } 
    },
    { 
        text: 'Short Name', 
        dataIndex: 'Name', 
        width: 130
    }
]

But how can i access "Short Name" column to set it from change event function.

Please suggest me the solution.

Thanks in advance.

Answer 1

You can use a edit event listener and play with the record as you want. Here it is :

 listeners: {
    edit: function (editor, e, eOpts) {
        var text = e.record.data.name;
        console.log(text);
        if (text.length <= 26 && !text.match(/[.:-]/)) {
            if (text.length == 26) {
                text = text[25] == ' ' ? text : text.substring(0, text.lastIndexOf(' '));
            }
            //code to set short name cell value.
            var record = e.record;
            record.set("email", text); //Here you can set the value
        }
    }
}

Their are many ways you can achieve the desired task.This is one way!! For reference,here is the fiddle