Buffered (infinite) grid with buffered store does not update on store reload

Question

We have a simple setup of a grid feeded by a buffered store. But if we call reload() on the store the store reloads but the grid didn't update. If we call load() the all is updated. We want to call reload because we want to keep all sorters, groupers & filters.

Here is the store

Ext.define('App.store.User',{
    extend: 'Ext.data.Store',
    requires: ['Ext.data.proxy.Direct'],
    model: 'App.model.User',

    remoteGroup: true,

    autoLoad: true,
    buffered: true,
    pageSize: 50,
    leadingBufferZone: 500,
    trailingBufferZone: 500,
    autoSync: true,

    constructor: function(config) {
        config = Ext.apply({}, config);
        if (!config.proxy) {
            var proxy = {
                type: 'direct',
                reader: {
                    idProperty: 'Id',
                    root: 'data',
                    type: 'json'
                },
                writer: {
                    allowSingle: false
                },
                api: {
                    read: User.List, 
                    create: User.Create,
                    update: User.Update,
                    destroy: User.Delete
                }
            };
            config.proxy = proxy;
        }

        this.callParent([config]);
    }
);

And the grid

Ext.define('App.view.grid.User',{
    extend: 'Ext.grid.Panel',
    alias: 'widget.usergrid',

    id: 'user-grid',

    loadMask: true,

    selModel: {
        multiSelect: true,
        pruneRemoved: false
    },
    selType: 'checkboxmodel',
    multiSelect: true,
    viewConfig: {
        trackOver: false
    },
    plugins:[{
        ptype: 'bufferedrenderer',
        trailingBufferZone: 50,
        leadingBufferZone: 50
    }],

    features:[{
        ftype: 'grouping',
        enableGroupingMenu: false
    }],

    constructor: function(config) {
        var editor = {ptype:'rowediting', clicksToEdit: 2};
        config = Ext.apply({}, config);
        if (!config.plugins) {
            config.plugins = [editor];
        } else {
            if(Ext.isArray()) {
                config.plugins.push(editor);
            } else {
                config.plugins = [config.plugins,editor];
            }
        }
        config.store = Ext.StoreMgr.lookup('User');
        this.callParent([config]);
    },

    initComponent: function() {
        var me = this;

        if (!me.store) {
            me.store = Ext.StoreMgr.lookup('User');
        }

        me.columns = [
            {text: 'ID',dataIndex:'Id'},
            {text: 'Client-ID',dataIndex:'Client_id'},
            {text: 'SuperiorId',dataIndex:'Superior_id'},
            {text: 'LastChange',dataIndex:'LastChange',xtype:'datecolumn',format:'d.m.Y'},
            {text: 'UserName',dataIndex:'UserName',editor:{xtype:'textfield'}},
            {text: 'Firstname',dataIndex:'Firstname',editor:{xtype:'textfield'}},
            {text: 'Lastname',dataIndex:'Lastname',editor:{xtype:'textfield'}},
            {text: 'ShortName',dataIndex:'ShortName',editor:{xtype:'textfield'}}
        ];

        me.callParent(arguments);
    }
});

@incutonez I think it doesn't matter from where I call, because the store reloads (and the grid shows the load mask). But the changes only get rendered if I call load() instead of reload(). But that dumps all applied filters, sorts & groups — JJR
ok, if you say so. I was just hoping for a working example, as that's much easier to work with. Hope you solve it. — incutonez

Luiguis Luiguis · Accepted Answer · 2015-02-06T15:31:45

I had a similar problem, my filters weren't applied, after reload can you try.

grid.getStore().loadPage(grid.getStore().currentPage);

Buffered (infinite) grid with buffered store does not update on store reload

1 Answers