Grid buffered/infinite scrolling in 4.1

[panpur]

Yes, there's a recently introduced bug with variableRowHeight. I have a fix submitted which will be in the final 4.1

Hi Animal, regarding your post above. Is it fixed in 4.1 ? I still got that error in 4.1 final.
It works for the first time. But after refreshing the data few times, the error occurs:

Uncaught TypeError: Cannot call method 'getXY' of null ext-debug.js:15796
Element.override.getOffsetsTo ext-debug.js:15796
Ext.define.beforeViewRefresh extjs/src/grid/PagingScroller.js?_dc=1337087153401:204

Btw I refresh data using this code:

this.store.pageMap.clear();
this.store.loadPage(1);

[gazal_ka]

There is no autoHeight or autoWidth config in Ext 4.1

There's no invalidateScrollerOnRefresh

There's no verticalScrollerType

To use buffered scrolling, you must give the grid a height, either by configuration or a layout of the container it is in.

Do not specify layout on a grid. It uses layout: 'fit' to fit the TableView inside it.

My grid is in the 'center' region of a border layout. I'm trying to migrate from 4.0.7 to 4.1.0 Final. The buffered scroll seems jerky and I'm facing the issue where the scroller is jumping up when I scroll down to the bottom of the grid.

[JohnnyHK]

I'm not using variable height rows but was still seeing the scrollbar bounce off the bottom of the range in Chrome. Setting variableRowHeight: true on verticalScroller fixed it, but I still wanted to know why that was needed with my fixed height rows. It turns out I had Chrome's Zoom set to 110%, and I'm sure that caused some rows to have heights a pixel or so taller than others. When I reset that to 100% I found I could remove the variableRowHeight setting and it still worked.

Hopefully this helps somebody as this was driving me nuts.

[Curtis Fletcher]

One of the prerequisites of infinite scrolling seems to be autoload: true. I have a lot of stores that are created at the start of my app but I'd prefer to be able to set the store loading later (When the matching grid is rendered) is there an easy way to "late-activate" a buffered store?

[JohnnyHK]

One of the prerequisites of infinite scrolling seems to be autoload: true. I have a lot of stores that are created at the start of my app but I'd prefer to be able to set the store loading later (When the matching grid is rendered) is there an easy way to "late-activate" a buffered store?

I've found that using autoload: false works fine with infinite scrolling. Just call store.loadPage(1) to initiate loading later.

[Curtis Fletcher]

I've found that using autoload: false works fine with infinite scrolling. Just call store.loadPage(1) to initiate loading later.

Thanks, I had tried that to no avail but it was probably on an earlier beta, apologies for not checking on RC3

[whirling dervish]

Can someone explain to me the relationship between the leading and trailing buffer configuration for the store backing the grid, and the same buffer configuration on the paging scroller?

[dllchrist]

Does buffered scrolling support local sorting now? We enabled buffered grid with local sort, everytime we scroll down the grid is automatically sorted by the first column of the grid, even if we sort the grid by some other column before the scroll.

[filippo.ferrari]

What should be the recommended approach to handle passing extra parameters with load/loadPage for buffered store? If I do

store.loadPage(1, {params:{ something: 'else' }})

something=else passed to server only with the request for the first page, all requests for subsequent pages will not have something=else set.
Is setting extraParams on proxy the only answer?

I miss if there's an answer to this post...

I've this problem with infinite scrolling, store:

Ext.define('Pt.store.StorePianiInfinite', {
    extend: 'Ext.data.Store',

    requires: [
        'Pt.model.ModelPianiTerapeutici'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'StoreInfinite',
            model: 'Pt.model.ModelPianiTerapeutici',
            buffered: true,
            clearOnPageLoad: false,
            leadingBufferZone: 300,
            pageSize: 100,
            remoteGroup: true,
            proxy: {
                type: 'ajax',
                simpleGroupMode: true,
                groupDirectionParam: 'dir',
                simpleSortMode: true,
                url: 'php/xy.php',
                reader: {
                    type: 'json',
                    idProperty: 'id',
                    messageProperty: 'msg',
                    root: 'piani'
                }
            },
            sorters: {
                direction: 'DESC',
                property: 'id'
            }
        }, cfg)]);
    }
}); 

Store listener to add extra params with request:

me.getStorePianiInfiniteStore().on({

    beforeload: function (store, operation, opts) {

        Ext.apply(operation, {
            params: {
                numero: me.getNPiano().getRawValue(),
                dt1: Ext.Date.format(me.getDataDa().getValue(),'Ymd'),
                dt2: Ext.Date.format(me.getDataA().getValue(),'Ymd'),
                dt3: Ext.Date.format(me.getDataVDa().getValue(),'Ymd'),
                dt4: Ext.Date.format(me.getDataVA().getValue(),'Ymd'),
                specialita: me.getCbSpecialita().getValue(),
                principio: me.getCbPrincipi().getValue(),
                medico: me.getCbMedico().getValue(),
                paziente: me.getCbPaziente().getValue(),
                stato: me.getCbStato().getValue()
            }
        });
    } 

But in Firebug I see only the first request with all params i need

req1.jpg

For page 2, 3...

req2.jpg

How to fix it?

[shmeltex]

How to fix it?

Looks like the only way to handle it is by using

store.getProxy().extraParams...