rendered block refreshed at 16 rows while BufferedRenderer view size is 46

Question

I have this snippet code

Ext.define('FieldGrid', {
    alias: 'fieldGrid',
    extend: 'Ext.grid.Panel',
    dock: 'left',
    selModel: {
        mode: 'SIMPLE'
    },
    columns: [
        {
            text: 'TODO Sites',
            dataIndex: 'text',
            flex: 1
        }
    ],
    bodyStyle: {
        background: '#FFFFFF'
    },
    filterOn: true,
    hideHeaders: true,
    width: 400,
    maxHeight: 400,
    baseStore: store,
    selectedIds: Ext.flatten(selectedIds),
    fieldGridConfig: {
                    plugins: 'bufferedrenderer',
                    height: 400
                }
})

When I have some rows selected initially then I filter the grid, this ends with the error below

Uncaught Error: rendered block refreshed at 16 rows while BufferedRenderer view size is 46

Any help we will be appreciated

Answer 1

Had a similar problem with refreshing a grid with locked columns. So instead of just doing grid.getStore().reload(); you need to do:

            grid.suspendLayouts();
            grid.getStore().reload();
            grid.getView().refresh();
            grid.resumeLayouts();

If you have a similar problem ExtJS will crash in syncRowHeightFinish function.

You might want to use this patch to avoid crashes in other cases (tested for ExtJS 6.2.1):

Ext.define('Ext.ux.view.TableSyncPatch', {
    override: 'Ext.view.Table',
    syncRowHeightFinish: function(synchronizer, otherSynchronizer) {
        var ln = synchronizer.length,
            bufferedRenderer = this.bufferedRenderer,
            i;
        if (ln > otherSynchronizer.length){
            ln = otherSynchronizer.length;
            console.warn('[TableSyncPatch] synchronizer.length!=otherSynchronizer.length');
        }
        for (i = 0; i < ln; i++) {
            synchronizer[i].finish(otherSynchronizer[i]);
        }
        // Ensure that both BufferedRenderers have the same idea about scroll range and row height
        if (bufferedRenderer) {
            bufferedRenderer.syncRowHeightsFinish();
        }
    },
}
// Warn if un-tested for specific version.
, function() {
    if (!Ext.getVersion().match('6.2.1')) {
        Ext.log({
            msg: 'This patch has not been tested with this version of ExtJS',
            level: 'warn'
        });
    }
});

Answer 2

After spinning longtime on google, I end with the solution below, i hope this may help.

I was can of using this

     mygrid.getView().bufferedRenderer.scrollTo(0);

to scroll on the top after filtering my grid. This cause that error. To fix it , I have to refresh my buffer view first

mygrid.getView().bufferedRenderer.refreshView(0);
mygrid.getView().bufferedRenderer.scrollTo(0);