View Full Version : ExtJs 4.x Programmatically Edit Data.

7 Sep 2011, 1:34 PM
I have a grid that I want to edit the row value for in a standard 'Ext.grid.Panel' with a store attached.
The store is a 'Ext.data.Store' that has an Ajax proxy that pulls data from the server. The data comes in and looks OK. Cell editing is enabled and appears to be working OK. The problem comes in when I have to edit the data programmatically. For example I have multi-select set for my row selection so I can have more than one row highlighted at a time. When I execute the following code the grid does not refresh its display value:

(inside click handler)
var gridAlarm = Ext.getCmp('myGrid');
if (gridAlarm) {

// Check the selected rows to make sure that the user
// has selected one or more rows.
if (gridAlarm.selModel.selected.length > 0) {

Ext.Array.each(gridAlarm.selModel.selected.items, function(record, index, selectedSelf) {

// Get the value that was selected in the add text grid.

var selectedValue = 'Hello World';

// Update each record
record.data['ColumnName'] = selectedValue;


else {

throw 'No records selected! You must be one or more records selected to update.';



I have verified that this changes the data in the store and in fact when I double click to go into edit mode on the cell the value shows up in the editor, but if I hit ESC to get out of the editor, the cell goes back to the original state (blank).

Any ideas?

7 Sep 2011, 1:40 PM
You're not using the API, you should use 'set' method of the Model.

record.set('ColumnName', selectedValue);