Refreshing Extjs Grid after Removing Records from Store Paging Memory

Question

I have EXT JS Grid. When I remove the record from grid, it gets removed from the page. But, when I do next/prev, the data is shown again. The toolbar also does not show the correct stats after removing records.

Can you please help on 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>

in your real code you are using a store with some remote api or you are loading data from a static file? — Mattex83
IMO related: sencha.com/forum/…, try ourPagingToolbar.onLoad(); — Giorgi Moniava

Harshit Shah Harshit Shah · Accepted Answer · 2017-03-14T09:13:18

If

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

is not working you can also try

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

So whenever the record is removed from the grid, you could use this statement.

Refreshing Extjs Grid after Removing Records from Store Paging Memory

1 Answers