Editing rows with the RowEditor plugin

The RowEditor plugin is another great addition to Ext, which allows you to rapidly edit full rows in a grid. The Customers grid in this recipe shows you how to use RowEditor.

How to do it...

1. 1. Include the RowEditor.js file in your project:

   <script type="text/javascript" src="RowEditor.js"></script>
   

   Note

   The RowEditor.js file can be obtained from the Ext JS 3.0 samples at http://extjs.com/deploy/dev/examples/ grid/row-editor.html.

2. 2. Define the fields for the customers data store:

   var custFields = [{
   name:'ID',
   type: 'int'
   },{
   name: 'first_name',
   type: 'string'
   }, {
   name: 'last_name',
   type: 'string'
   }, {
   name:'phone',
   type:'string'
   }, {
   name: 'email',
   type: 'string'
   }]
   var Customer = Ext.data.Record.create(custFields);
   

3. 3. Create a data store for the customers grid:

   var customersStore = new Ext.data.JsonStore({
   url: 'grid-row-editor.php',
   root: 'customers',
   fields: custFields
   });
   

4. 4. Create a data store for the cities combo box:

   var citiesStore...