Extjs grid update after deleting records from store paging memory

Question

I have an EXT JS Grid. When I delete a record from the grid, it is removed from the page. But, when I do next / prev, the data is displayed again. The toolbar also does not show the correct statistics after deleting records.

Can you help with this?

<script type="text/javascript" src="/extjs-4.0.7/ext-all.js"></script> <script type="text/javascript" src="/extjs-4.0.7/examples/ux/data/PagingMemoryProxy.js"></script> <link rel="stylesh`enter code here`eet" type="text/css" href="/extjs-4.0.7/resources/css/ext-all.css" /> <script> var selectedRecord = null; function getRecord() { return selectedRecord; } var data = '{"user":[sample date for the grid]}'; var workitemList = ""; var selectedItems = new Array(); Ext.onReady(function() { Ext.QuickTips.init(); Ext.tip.QuickTipManager.init(); Ext.define('Model', { extend: 'Ext.data.Model', fields: [{ name: 'WORKITEMID', mapping: 'WORKITEMID' }, { name: 'ALERTID', mapping: 'ALERTID' }, ] }); var storeMain = Ext.create('Ext.data.Store', { model: 'Model', autoLoad: false, buffered: false, pageSize: 5, data: [], proxy: { type: 'pagingmemory', reader: { type: 'json', root: 'user' } }, remoteSort: true, remoteFilter: true, remoteGroup: true }); var sm = Ext.create('Ext.selection.CheckboxModel', { listeners: { selectionchange: function(sm, selections) { selectedItems = selections; } } }); var myGrid = new Ext.grid.Panel({ title: 'Unassign Alerts', collapsible: false, border: true, loadMask: true, frame: false, id: 'myGridId', columnLines: true, animCollapse: false, loadMask: true, stripeRows: true, renderTo: Ext.getBody(), store: storeMain, selModel: sm, columns: [ { text: 'Alert ID', dataIndex: 'WORKITEMID', flex: 8 / 100 } ], listeners: { 'afterrender': function(e) { var gridthWidth = this.getWidth(); this.setWidth(gridthWidth); this.setAutoScroll(true); }, 'columnresize': function(e) { var gridthWidth = this.getWidth(); this.setWidth(gridthWidth); this.setAutoScroll(true); }, cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) { if (iColIdx == 1) { selectedRecord = iRecord; } }, render: function(e) { this.store.getProxy().data = Ext.decode(data); //this.store.pageSize =25; this.store.load(); this.store.on('load', function() { //myMask.hide(); }); e.style = " background-color: #003464;"; } }, bbar: new Ext.PagingToolbar({ store: storeMain, id: 'Ptoolbar', pageSize: 5, displayInfo: true, height: 25, //plugins: Ext.create('Ext.ux.ProgressBarPager', {}), displayMsg: 'Displaying Records {0} - {1} of {2}', emptyMsg: "No records to display", listeners: { afterrender: function() { this.child('#refresh').hide(); } }, buttons: [{ id: 'btnID', itemId: 'saveBtn', pressed: true, frame: true, text: 'Remove', handler: function(store) { if (selectedItems.length > 0) { store.remove(selectedItems); Ext.getCmp('clientSummaryGridId').getView().refresh(); } else { Ext.Msg.alert("Result", "No selection"); } } }] }) }); }); </script> 

Answer 1

If

 Ext.getCmp('myGrid').getView().Refresh(); 

doesn't work, you can also try

 Ext.getCmp('myGrid').reconfigure(gridstore); 

Therefore, whenever a record is removed from the grid, you can use this operator.