Ext JS 4: GridPanel -基于更新的单元格更新列单元格值

Ext JS 4 : GridPanel - Update a column cell values based on the updated cell

本文关键字：更新 单元格 于更新 JS GridPanel Ext      更新时间：2023-09-26

我有一个显示文章详细信息的网格面板。有几列。当我们的员工更改一个单元格值时，我希望根据更新后的字段匹配所有列字段值。

+----------------------------------------+ 
| ROW ID | COL A | COL B | COL C | COL D | 
+----------------------------------------+ 
|   1    |   TR  |  IST  |  100  |   12  |
+----------------------------------------+
|   2    |   US  |   NY  |   60  |    7  |
+----------------------------------------+
|   3    |   DE  |  BER  |   74  |    9  |
+----------------------------------------+

我想做的是，当用户将第一行COL D的值(12)更改为15时，其他行COL D的值应随15自动更改。

+----------------------------------------+ 
| ROW ID | COL A | COL B | COL C | COL D | 
+----------------------------------------+ 
|   1    |   TR  |  IST  |  100  |   15  | <- user has changed the value
+----------------------------------------+
|   2    |   US  |   NY  |   60  |   15  |
+----------------------------------------+
|   3    |   DE  |  BER  |   74  |   15  |
+----------------------------------------+

更新网格edit事件中的记录。

下面是一个例子:

Ext.widget('grid', {
    renderTo: Ext.getBody()
    ,columns: [{dataIndex: 'a', header: 'Col A', editor: 'textfield'}]
    ,store: {
        fields: ['a']
        ,data: [{a: 1},{a:2},{a:3}]
    }
    ,plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
    ,listeners: {
        // this event is added to the grid by the CellEditing plugin
        edit: function(editor, e) {
            e.grid.getStore().each(function(record) {
                record.set('a', e.value);
            });
        }
    }
});

您应该更新后面存储中的记录。就像

store.each(function(record){
    record.set('col_d', 15);

});

相关文章：