更改其值时更新RowEditing字段

Question

I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?

Is this possible?

Answer 1

You can use edit events of rowedit as follow:

Sencha Fiddle : Grid RowEditor - Change cell value based on condition

grid.on('edit', function(editor, e){
/**
 * here I am checking the column name to complete process
 * you change what you want
 */
if (e.field == "name") {
    e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}

})

Answer 2

When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.

To illustrate the problem:

1. In the previous answer, open the fiddle link ( https://fiddle.sencha.com/#fiddle/4pj ).
2. Double click the email field and change the name.
3. The handler will not update the result field as e.field will now be 'email' and not 'name'.

That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.

To get the list of only modified fields, use e.record.getChanges() . These will give you only the modified fields and their new values.

Answer 3

You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener

Example: ...

{
    header: 'HeaderName',
    dataIndex: 'man_peso',
    type: 'number',
    width: 50,
editor: {
        enableKeyEvents: true,
        listeners: {
            change: function(c, e, eOpts) {
                //here you can modify others components
            }
        },
        xtype: 'textfield',
        maskRe: /[0-9\.]/,
        maxLength: 16
    },

...