Tuve un comportamiento extraño de las tiendas en ext.js, cuando estaba trabajando con cuadrículas y con paginación. Problema: tengo una cuadrícula, se adjunta una tienda con paginación. Al eliminar una fila de la cuadrícula, la fila de la página siguiente no llega a la actual. Intenté volver a cargar la tienda, commitChanges(), refresh(), pagingToolbar.doRefresh() y otras cosas, pero acabo de recuperar la fila eliminada en la cuadrícula.
Tengo Ext.JS 5.1.0.107.
Reproduje este error en el violín de Sencha para que puedas ver un ejemplo en vivo: https://fiddle.sencha.com/#fiddle/3ia0
Código fuente de reproducir el problema:
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' }] });