Automatic uploading of data edited with a grid

The Customers grid in this recipe illustrates how a grid component and its data store can be configured so that the data edited in the grid is automatically propagated to the server.

In case of changes to any editable cell, the updated value will be uploaded to the server:

How to do it...

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

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

2. 2. Create a store for cities' data:

   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({
   title:'Customers',
   store: customersStore,
   columns: [
   { header: "ID", width: 30, dataIndex: 'ID', sortable: true...