Changing grid panel data using cell editors

The Customers grid built in this recipe illustrates how different cell editors are used to allow for in-place editing of a data record.

A text field can be used as a cell editor as shown in the following screenshot:

Combo boxes can also serve as cell editors:

How to do it...

1. 1. Define the customers' data store:

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

2. 2. Define the cities data store. This store will feed the cities lookup:

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

3. 3. Create the grid panel:

   Ext.onReady(function() {
   var grid = new Ext.grid.EditorGridPanel({
   title:'Customers',
   store: customersStore,
   columns: [
   { header: "ID", width: 30, dataIndex...