Performing batch uploads of data edited with a grid

This recipe illustrates how a grid component and its data store can be configured so that record changes are locally cached in the store and automatically sent to the server as a batch at a later time.

Multiple edits in the Customers grid can be batched and sent to the server by clicking on the Save Changes button:

How to do it...

1. 1. Create a data store for the customers' information:

   var customersStore = new Ext.data.JsonStore({
   url: 'grid-batch-save.php',
   root: 'customers',
   idProperty: 'ID',
   successProperty: 'success',
   fields: ['ID', 'name', 'address', 'zip code', 'phone', 'city'],
   writer: new Ext.data.JsonWriter(),
   autoSave: false,
   batch:true
   });
   

2. 2. Create a data store that will hold the cities list:

   var citiesStore = new Ext.data.JsonStore({
   url: 'grid-editor.php',
   baseParams: { xaction: 'cities' },
   root: 'cities',
   fields: ['city_id', 'city']
   });
   

3. 3. Define the grid panel:

   Ext.onReady(function() {
   var grid = new Ext.grid.EditorGridPanel(...