如何实现Grid中一个widgetColumn numberfield修改时自动更新另一个字段

嘿，我明白你遇到的困扰了——在Grid的WidgetColumn里修改Test1的数值时，想自动同步到Test2，但之前的监听器没生效对吧？这主要是因为WidgetColumn里的组件是每行单独渲染的，我们需要正确关联到当前行的记录，同时还要确保Store里有对应的字段来存储这两个值。

下面是调整后的完整代码，我会标注关键修改点：

Ext.onReady(function() { 
    Ext.create('Ext.data.Store', { 
        storeId: 'simpsonsStore', 
        fields: ['name', 'email', 'phone', 'Test1', 'Test2'], // 新增Test1和Test2字段，确保数据能绑定存储
        data: { 
            'items': [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224", Test1: 0, Test2: 0 },
                { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234", Test1: 0, Test2: 0 },
                { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244", Test1: 0, Test2: 0 },
                { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254", Test1: 0, Test2: 0 }
            ] 
        }, 
        proxy: { 
            type: 'memory', 
            reader: { 
                type: 'json', 
                root: 'items' 
            } 
        } 
    }); 

    Ext.create('Ext.grid.Panel', { 
        title: 'Simpsons', 
        selType: 'rowmodel', 
        plugins: [ 
            Ext.create('Ext.grid.plugin.RowEditing', { 
                clicksToEdit: 1, 
                autoCancel: false 
            }) 
        ], 
        store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [
            { 
                text: 'Name', 
                dataIndex: 'name', 
                editor: { 
                    xtype: 'textarea', 
                    allowBlank: false, 
                    listeners: { 
                        change: function (field, newValue) { 
                            var record = field.up('roweditor').record; // 改用roweditor获取当前记录，更可靠
                            record.set('name', newValue);
                            record.set('email', newValue);
                        } 
                    }, 
                } 
            }, 
            { text: 'Email', dataIndex: 'email', flex: 1 }, 
            { text: 'Phone', dataIndex: 'phone' }, 
            { 
                "xtype": "widgetcolumn", 
                "header": "Test1", 
                "dataIndex": "Test1", 
                "itemId": "landedGrossQty", 
                "flex": 1, 
                "widget": { 
                    "xtype": "numberfield", 
                    "minValue": 0, 
                    "listeners": { 
                        "change": function (field, newValue) { 
                            // 获取当前widget对应的行记录，这是WidgetColumn组件的特有属性
                            var currentRecord = field.widgetRecord;
                            // 将Test1的值同步到Test2，这里可以根据需求修改逻辑，比如乘以某个系数等
                            currentRecord.set('Test2', newValue);
                        } 
                    } 
                } 
            }, 
            { 
                "xtype": "widgetcolumn", 
                "header": "Test2", 
                "dataIndex": "Test2", 
                "flex": 1, 
                "widget": { 
                    "xtype": "numberfield", 
                    "minValue": 0, 
                } 
            }
        ], 
        height: 200, 
        width: 400, 
        renderTo: Ext.getBody() 
    }); 
});

关键修改说明： #

• Store字段补充：给Store的fields数组添加了Test1和Test2，同时在data里给每行初始化这两个字段的值——没有对应的字段，Grid无法正确绑定和存储这两个列的数据，这是基础前提。
• WidgetColumn监听器优化：在Test1的numberfield的change监听器里，用field.widgetRecord直接获取当前行的记录，这是ExtJS为WidgetColumn组件提供的专属属性，能准确关联到当前编辑的行。然后调用record.set('Test2', newValue)来同步值，这样Test2的numberfield会自动更新，因为它绑定了Test2的dataIndex。
• Name列编辑器优化：原来的获取记录方式不太可靠，改成通过field.up('roweditor').record来获取当前行编辑的记录，逻辑更清晰稳定。

这样调整后，当你修改Test1的数值时，Test2会自动同步填充对应的数值啦！

内容的提问来源于stack exchange，提问作者David