6

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>
3
  • 1
    Ext.getCmp('myGrid').getView().refresh()
    – sorab
    Oct 13, 2015 at 5:54
  • 1
    in your real code you are using a store with some remote api or you are loading data from a static file?
    – Mattex83
    Oct 13, 2015 at 7:26
  • IMO related: sencha.com/forum/…, try ourPagingToolbar.onLoad(); Mar 11, 2017 at 10:31

1 Answer 1

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.