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.

I have Ext.JS 5.1.0.107.

I've reproduced this bug on Sencha's fiddle so you can see live example: https://fiddle.sencha.com/#fiddle/3ia0

Source code of reproducing the problem:

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'
    }]
});