How to save data for the editable grid in Ext JS using store.sync?

Question

I have a form with one of its fields as editable grid.

1. How to save the grid data once I click outside the grid.
2. Should the method store.sync() be used after Events.AfterEdit() or be saved on form submit only ?

Code:

store.sync({
    callback: function () {
        console.log('callback', arguments);
    },
    success: function () {
        console.log('success', arguments);
    },
    failure: function (batch, opt) {
        //code for failure
    }
});

Answer 1

Actually we don't need store.sync() to save the data of a editable grid. We can simply do it by normal operations for model if we have correct json data coming to back end by using model.save() or similar operations. Below is an excerpt for setting data.

var rowIndex = myGrid.find('id', yourServerResponseData.id);
var rowRecord = myGridStore.getAt(rowIndex);
rowRecord.set(yourServerResponseData);
rowRecord.commit();