Infinite Scroll "options is undefined"

[ejerrywest]

In ExtJS 4.1 beta 2 I managed to implement an infinite scroll grid with a remote store. I basically took an existing (fully operational) paging grid (with remote store, remote filtering and remote sorting) and then put in the appropriate configs for infinite scrolling:

// Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
verticalScrollerType: 'paginggridscroller',
// do not reset the scrollbar when the view refreshs
invalidateScrollerOnRefresh: false,
// infinite scrolling does not support selection
disableSelection: true,

It doesn't say this anywhere in the docs(see Infinite Scrolling section), but I also found that I have to set my store to have buffered: true config. And I can't do the initial load with store.load() it needs to be done like this:

store.prefetch({
    start: 0,
    limit: 200,
    callback: function() {
        store.guaranteeRange(0, 99);
    }
});

With all that, everything works great if I scroll slowly and thus allow the data to prefetch, and don't use any filters.

However, if I scroll fast or try to make the infinite scroll grid reload with a filter active (whether prefetching or not) it all breaks apart. Error is: options is undefined.

Also, if I apply a sort to the grid and scroll down the grid never even displays the buffered data (stuff that's already loaded). I.e. event though I load 200 records, beyond 100 records it's all blank and the store never reloads.

I've spent some time doing some tracing in the code and I found the following:

The error seems to originate from the "mask" method in Ext.data.Store. It gets called by the infinite scroller:

mask: function() {
    this.masked = true;   
    this.fireEvent('beforeload');
},

For some reason, this method fires the beforeload event without the Ext.data.Operation parameter which is supposed to be part of it as specified here.

As a result, an error occurs in the onbeforeload handler in Ext.ux.grid.FiltersFeature because of course "options" is undefined:

/**
 * @private
 * Handler for store's beforeload event when configured for remote filtering
 * @param {Object} store
 * @param {Object} options
 */
onBeforeLoad : function (store, options) {

    options.params = options.params || {};
    this.cleanParams(options.params);
    var params = this.buildQuery(this.getFilterData());
    Ext.apply(options.params, params);

},

I can cut out the call to this mask method from the PagingScroller code and then the scroll functionality is great. I can scroll as fast as I like and it loads the data properly. But then filters and sort does not get applied to the ajax requests.

I haven't dived as much into the sorting aspect and why that causes the already loaded buffered to not even appear.

I'm thinking that if I could just figure out how to force the "mask" method to fire beforeload with the operation parameter (like the docs say it is supposed to) everything will be fine. Problem is, I haven't been able to figure out how to do that. Any suggestions?

I've also tried downgrading to 4.0.7 and 4.0.2a and I get the same results, so it isn't just a beta problem.

[mitchellsimoens]

Using the example for infinite grid, I scrolled as fast as my finger would go but cannot reproduce. The beforeload event is commented to be a hack for LoadMask so I'm questioning... just trying to reproduce.

[ejerrywest]

Your right, I took out the loadMask: true from my grid and scrolling functionality is great. I suppose I don't really need it. However, it doesn't solve the problem of the infinte scroller not passing the filter and sort parameters to my backend.

[ejerrywest]

I spoke too soon, I just realized I still had the call to store.mask() from the Ext.grid.PagingScroller still commented out that was why it was working. I see what you're saying about the example working fine but as far as I can tell all my configs are set correctly per the example and I am still getting the error when I allow mask to run, which it does explicitly from Ext.grid.PagingScroller whether loadMask: true or not as can be seen here (from the Ext.grid.PagingScroller code):

doAttemptLoad:  function(start, end) {
        this.store.mask(); 
        this.store.guaranteeRange(start, end);
    }

I downgraded to 4.0.7 again to match the example more exactly but no luck, this is what I am working with:

// the paged store of account data
    var store = Ext.create('Ext.data.Store', {
        model: 'Account',
        remoteSort: true,
        remoteFilter: true,
        buffered: true,
        proxy: {
            type: 'ajax', 
            url: '../list?listName=tapAccounts',
            simpleSortMode: true,
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'total'
            }
        },
        pageSize: 200
    });

    // the grid that shows the data
    var grid = Ext.create('Ext.grid.Panel', {
            region: 'center',
            store: store,
            //loadMask: true,
            viewConfig: {
                trackOver: false,
                //singleSelect: true,
            },
            features: [{
                ftype: 'filters',
                updateBuffer: 1000 // trigger load after a 1 second timer
            }],
    // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
    verticalScrollerType: 'paginggridscroller',
    // do not reset the scrollbar when the view refreshs
    invalidateScrollerOnRefresh: false,
    // infinite scrolling does not support selection
    disableSelection: true,            
            
            
            // grid columns
            columns: [columns...],
        });

[ejerrywest]

I found that if I take out the FilterFeature entirely infinite scrolling works great and does pass the sorting parameters to my backend. I will start sifting though the FilterFeature code instead. Please post if you find out anything about this.

[ejerrywest]

I have some overrides that support infinite scrolling with remote filters and remote sort, this works fine on FF 4.0 (the company's default intranet browser) with ExtJS 4.1 b2 haven't tested on anything else.

Override are here.