title: Strange behavior of Ext.JS stores with paging and grids
body: <p>I had some strange behavior of the stores in ext.js, when I was working with grids and with pagination.
  Problem: I have a grid, a store with pagination is attached to it. When removing a row from the grid, the row from the next page does not get to the current one.
  I tried reload store, commitChanges(), refresh(), pagingToolbar.doRefresh() and other things, but i just get the deleted row back into the grid.</p>
  <p>I have Ext.JS 5.1.0.107.</p>
  <p>I've reproduced this bug on Sencha's fiddle so you can see live example: <a href="https://fiddle.sencha.com/#fiddle/3ia0" rel="nofollow noreferrer">https://fiddle.sencha.com/#fiddle/3ia0</a></p>
  <p>Source code of reproducing the problem:</p>
  <pre><code>var store = Ext.create('Ext.data.Store', {
      fields: ['name', 'email', 'phone'],
      pageSize: 5,
      proxy: {
          enablePaging: true,
          type: 'memory'
      },
      data: [{
          name: 'Lisa 1',
          email: 'lisa@simpsons.com',
          phone: '555-111-1224'
      }, {
          name: 'Bart 2',
          email: 'bart@simpsons.com',
          phone: '555-222-1234'
      }, {
          name: 'Homer 3',
          email: 'homer@simpsons.com',
          phone: '555-222-1244'
      }, {
          name: 'Marge 4',
          email: 'marge@simpsons.com',
          phone: '555-222-1254'
      }, {
          name: 'Bart 5',
          email: 'bart@simpsons.com',
          phone: '555-222-1234'
      }, {
          name: 'Homer 6',
          email: 'homer@simpsons.com',
          phone: '555-222-1244'
      }, {
          name: 'Marge 7',
          email: 'marge@simpsons.com',
          phone: '555-222-1254'
      }]
  });
  
  var grid = Ext.create('Ext.grid.Panel', {
      title: 'Simpsons',
      store: store,
      columns: [{
          text: 'Name',
          dataIndex: 'name'
      }, {
          text: 'Email',
          dataIndex: 'email',
          flex: 1
      }, {
          text: 'Phone',
          dataIndex: 'phone'
      }, {
          xtype: 'actioncolumn',
          text: 'delete',
          width: 50,
          items: [{
              icon: 'https://img.icons8.com/material-outlined/72/filled-trash.png',
              tooltip: 'Delete',
              handler: function (_, rowIndex) {
                  var elem = grid.getStore().getAt(rowIndex);
                  grid.getStore().remove(elem);
                  grid.dockedItems.getAt(2).doRefresh();
              }
          }]
      }],
      height: 500,
      width: 500,
      renderTo: Ext.getBody(),
      dockedItems: [{
          xtype: 'pagingtoolbar',
          reference: 'pagingToolbar',
          displayMsg: '',
          flex: 1,
          store: store,
          dock: 'bottom'
      }]
  });
  </code></pre>