Saturday, February 26, 2011

Refresh single ExtJs grid row after editing without refreshing grid

Hello,

This is another ExtJs blog. Recently I was working with ExtJs editor grid and I got requirement that after editing data in a row grid should be refreshed and at the same time row should be back to its normal position.

Those who have worked with ExtJs editor grid know that when you edit values in row cells, it will display red mark on top left corner. It states that row data is edited. See the image below.


To remove it, we need to reload grid data and refresh the grid view. Following is the code for it.

myGrid.store.reload();
myGrid.getView().refresh();

Grid will be refreshed and updated data gets loaded from server. Now my requirement was to refresh the only single row, without refreshing the whole grid. When you tab out of edit field or you click outside of the row it will fire afteredit event. Normally in afteredit event there is a Ajax request to send updated data to server and when we get success response we normally reload the grid data store. But in this case its different situation. Following is the code for it.

'afteredit':{
fn : function(e){
Ext.Ajax.request({
url:"savedata.php",
method:'GET',
params:{
param1:value1,
param2:value2
},
success:function(resp,opt){
e.record.set(e.field,gridValue);
e.record.commit();
myGrid.getView().refresh();
},
failure:function(resp,opt){
}
});
}
}

Checkout the code in success function of Ajax request. This does the trick.
e.reocord.set() function set's the value. For example if you have some renderer for columns then this code will set the cell value according to renderer.

e.record.commit() commits the changes and grid row is back to its normal view. It will remove all the red marks from the edited cell.

So using this small trick you have normal row after editing it without refresh the grid data. This trick is useful when you have large number of data in the grid and you want to avoid unnecessary data flow.