title: Issue with Row Editing Plugin in Extjs
body: <p>I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below</p>
  
  <p><img src="https://i.stack.imgur.com/IEqmm.png" alt="Screen Shot of My web page after editing">    </p>
  
  <p>My proxy model is: </p>
  
  <pre><code>Ext.define('proxymodel', {
      extend: 'Ext.data.Model',
      fields: [{
          name: 'id',
          type: 'int',
          persist: false
      }, {
          name: 'gender',
          type: 'auto'
      }, {
          name: 'name',
          type: 'auto'
      }, {
          name: 'age',
          type: 'int'
      }],
  
      identifier: 'sequential', // to generate -1, -2 etc on the client
      proxy: {
          type: 'rest',
          //format: 'json',
          //appendId: false,
          idParam: "id",
          //limitParam:"",
          //filterParam: "",
          //startParam:'',
          //pageParam:'',
          url: 'http://localhost:3000/posts',
          api: {
              read: 'http://localhost:3000/db',
              create: 'http://localhost:3000/posts',
              update: 'http://localhost:3000/posts',
              destroy: 'http://localhost:3000/posts'
  
          },
  
          headers: {
              'Content-Type': "application/json"
          },
  
          reader: {
              type: 'json',
              rootProperty: 'posts',
  
              totalProperty: 'total'
  
          },
          writer: {
              type: 'json'
          }
      }
  });
  </code></pre>
  
  <p>In <code>Application.js</code>, I have defined row editing plugin as:</p>
  
  <pre><code>var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
      listeners: {
          cancelEdit: function(rowEditing, context) {
              // Canceling editing of a locally added, unsaved record: remove it
              if (context.record.phantom) {
                  store.remove(context.record);
              }
          },
  
          edit: function(editor, e) {
              // commit the changes right after editing finished
              e.record.commit();
          }
      }
  });
  </code></pre>
  
  <p>And my store looks like:</p>
  
  <pre><code>Ext.define('Store', {
      extend: 'Ext.data.Store',
      storeId: 'peopleStore',
      pageSize: 500,
  
      //buffered: true,
      //leadingBufferZone: 300,
  
      pageSize: 5,
  
      autoLoad: {
          start: 0,
          limit: 5
      },
      autoSync: true,
  
      sorters: [{
          property: 'age',
          direction: 'ASC'
      }],
  
      groupField: 'gender'
  });
  </code></pre>
  
  <p>Can anyone point out my mistake? </p>
  
  <p>I have tried to reload my store after editing in 'edit' function of <code>rowEditing</code> but it didn't work.</p>
  
  <p>Thanks for your time.</p>