Set the edited row in EXTJS grid after editing without refreshing page - extjs4

Question

I am editing a row in EXTJS grid on clicking the edit action link. On clicking the edit link of a row a new window opens with all the data of the row and "Save" and "Cancel" button.
On clicking the "Save" button, it is saving the record in database. But I want the row should also get refreshed without refreshing the page.
I am new to EXTJS.
Can any one help me to do the same.
Here is my code.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ID',
type: 'int'
},
{
name: 'jobNo',
type: 'int'
},
{
name: 'stageCode',
type: 'String'
},
{
name: 'productTitle',
type: 'String'
},
{
name: 'brand',
type: 'String'
},
{
name: 'category',
type: 'String'
},
{
name: 'ftpDate',
type: 'Date'
}],
idField: 'ID'
});
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: 'TestResult',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
url : 'data.jsp',
reader :
{
type : 'json'
},
writer :
{
type : 'json'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Buffered Grid of records',
store: store,
loadMask: true,
plugins: 'bufferedrenderer',
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: 'Department: {name}',
showSummaryRow: false
}],
// grid columns
columns:[{
text: 'ID',
sortable: true,
dataIndex: 'ID',
groupable: false,
locked: true,
width: 70
}, {
text: 'Job No.',
sortable: true,
dataIndex: 'jobNo',
groupable: false,
locked: true,
width: 120
}, {
text: 'Version',
dataIndex: 'stageCode',
groupable: false
}, {
text: 'Product Title',
dataIndex: 'productTitle',
groupable: false
}, {
text: 'Brand',
dataIndex: 'brand',
groupable: false
}, {
text: 'Category',
dataIndex: 'category',
width: 200,
groupable: false
}, {
text: 'FTP Date',
dataIndex: 'ftpDate',
xtype: 'datecolumn',
groupable: false
},
{
xtype:'actioncolumn',
header:'Edit',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
editForm.show();
editForm.down('form').loadRecord(rec);]
}],
renderTo: Ext.getBody()
});
var editForm = new Ext.Window({
title: 'Edit Window',
items:[
{
xtype: 'form',
url: 'UpdateController',
items: [
{
xtype: 'hidden',
fieldLabel: 'ID',
name: 'ID',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Job No.',
name: 'jobNo',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Version',
name: 'stageCode',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Product Title',
name: 'productTitle',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Category',
name: 'category',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Brand',
name: 'brand',
allowBlank: false
},
{
xtype: 'datefield',
fieldLabel: 'FTP Date',
name: 'ftpDate',
allowBlank: false
}],
buttons : [{
text : 'Save',
handler: function()
{
this.up('form').getForm().submit(
{
success: function(f,a)
{
store.save();
var win = Ext.WindowManager.getActive();
if (win)
{
win.hide();
}
},
failure: function(f,a)
{
//Ext.Msg.alert('Warning', 'Error');
Ext.Msg.alert('Warning', a.result.errormsg);
this.up('window').hide();
}
});
}
},
{
text: 'Cancel',
handler: function()
{
this.up('window').hide();
}
}]
}
]
});
});
Thanks

Answer 1

In your this.up('form').getForm().submit success handler you can update record, which you loaded into form, by using Ext.form.Basic updateRecord method.
So just add into success handler code:
// update record with form data
f.updateRecord();
// mark record as synchronized with server (because you already sent data to server with form submit method)
f.getRecord().commit();