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.

enter image description here

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.

Can you create a simple fiddle? – Mr_Green Sep 03 '13 at 05:48 — Mr_Green, Sep 03 '13 at 05:48
http://jsfiddle.net/PJbtM/29/ – Sivakumar Sep 03 '13 at 06:28 — Sivakumar, Sep 03 '13 at 06:28

score 7 · Answer 1 · answered Sep 03 '13 at 06:32

7

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

answered Sep 03 '13 at 06:32

Dev

3,922
3
24
44

1

The above function will execute after completion of edit operation. But my requirement is to change on every key press. – Sivakumar Sep 03 '13 at 09:50
But I think the outcome would be same when the focus is lost.Anyways,you got it!!Thats great! – Dev Sep 03 '13 at 10:08
1

Yeah outcome is same i agree with you. But i am correct as per my requirement. Thanks you so much for good answer. – Sivakumar Sep 03 '13 at 12:12
Worth mentioning, that the listener is applied on the grid. Also the edit listener has `editor, context, eOpts` parameters in ExtJs 4. – MarthyM Sep 27 '17 at 07:05

score 1 · Accepted Answer · answered Sep 03 '13 at 09:51

I got solution to this problem.

listeners : {
    change : function(field, newValue,o ,e) {
        var text = field.value;
        if(text.length <= 26 && !text.match(/[.:-]/)) {
            if(text.length == 26) {
                text = text[25]==' ' ? text : text.substring(0, text.lastIndexOf(' '));
            } 
            var selectedModel = this.up('grid').getSelectionModel().getSelection()[0];
            selectedModel.set('Name', text);
        }
    }
}

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

2 Answers2