title: Ext JS 4 row editing save issues
body: <p>I'm trying to create a simple grid using Ext JS that allows me to quickly navigate through and edit each row.  Basically I want to start editing a row, hit the down arrow and be able to begin editing the next row.  It's fine if I don't save until the end, but right now when I try to navigate down to the next field, it tells me I need to commit or cancel the edit first.  Is there a setting I'm missing or something I'm just overlooking?  I'm still pretty new to Ext JS and don't fully understand how everything works or ties together yet.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt; 
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Grid Testing&lt;/title&gt;
      &lt;script type="text/javascript" src="js/ext-4.1.1a/ext-all.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.1a-gpl/resources/css/ext-all-debug.css" /&gt;
  
      &lt;style type="text/css"&gt;
          .x-selectable, .x-selectable * {
              -moz-user-select: text!important;
              -khtml-user-select: text!important;
          }
          .x-grid-row-editor-buttons{
              display: none;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
          &lt;div id="grid-example"&gt;&lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  Ext.application({
      name: 'myGrid',    
      autoCreateViewport: false,
      launch: function() {
  
          Ext.require([
              'Ext.grid.*',
              'Ext.data.*',
              'Ext.util.*',
              'Ext.state.*',
              'Ext.form.*',
          ]);
  
          /**
           * MODEL
           **/
          var model = Ext.define('Answer', {
              extend: 'Ext.data.Model',
              fields: [{
                  name: 'answer_number',
                  type: 'float',
                  convert: null,
                  defaultValue: undefined
              },
              {
                  name: 'answer_text',
                  type: 'float',
                  convert: null,
                  defaultValue: undefined
              },
              {
                  name: 'data_column',
                  type: 'float',
                  convert: null,
                  defaultValue: undefined
              }],
              idProperty: 'answer_number'
          });
  
  
  
          /**
           * STORE
           **/
          // sample static data for the store
          var myData = [[1, 'test answer 1', 12], [2, 'test answer 2', 12], [3, 'test answer 3', 12], [4, 'test answer 4', 12], [5, 'test answer 5', 12]];
          // create the data store
          var store = Ext.create('Ext.data.ArrayStore', {
              model: 'Answer',
              data: myData,
              autoSync: true,
              autoLoad: true,
          });
  
  
          var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
              clicksToEdit: 1,
              autoCancel: false,
          });
  
          var columns = [{
                  text: '#',
                  width: 40,
                  sortable: false,
                  dataIndex: 'answer_number'
              },
              {
                  text: 'Answer',
                  flex: 1,
                  sortable: false,
                  dataIndex: 'answer_text',
                  editor: {
                      allowBlank: true
                  }
              },
              {
                  text: 'Data Column',
                  width: 75,
                  sortable: false,
                  dataIndex: 'data_column'
              }];
  
          // create the Grid
          var grid = Ext.create('Ext.grid.Panel', {
              store: store,
              stateful: true,
              collapsible: false,
              multiSelect: true,
              columns: columns,
              height: 150,
              width: 600,
              renderTo: 'grid-example',
              plugins: [rowEditing],
          }); //end grid
  
  
          grid.getEl().addKeyMap({
              eventName: "keyup",
              binding: [
                  {
                      // Navigate through the answers or create a new one if at the end
                      key: Ext.EventObject.DOWN,
                      fn:  function(){
                          store.commitChanges();  //this doesnt seem to be working
                          var currentRow = grid.getSelectionModel().getSelection()[0];
                          var rowCount = store.count();
                          if((currentRow['index']+1) &lt; rowCount){
                              //select next row
                              rowEditing.startEdit((currentRow['index']+1), 1);
                          }else{
                              //create new one with dummy data
                              var r = Ext.create('Answer', {
                                  answer_number: '9',
                                  answer_text: '',
                                  data_column: '50'
                              });
                              store.insert(rowCount, r);
                              rowEditing.startEdit(rowCount, 1)
                          }
                      }
                  },
                  {
                      // Navigate up through the answers
                      key: Ext.EventObject.UP,
                      fn:  function(){
                          store.commitChanges();
                          var currentRow = grid.getSelectionModel().getSelection()[0];
                          rowEditing.startEdit((currentRow['index']-1), 1);
                      }
                  }
  
              ]
          });
  
  
  
      },
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help is very much appreciated.  Thanks!</p>