Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default Infinite Scroll "options is undefined"

    Infinite Scroll "options is undefined"


    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:

    Code:
    // 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:

    Code:
    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:

    Code:
    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:

    Code:
    /**
     * @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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default


    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):

    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:

    Code:
    // 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...],
            });

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default Resolved!

    Resolved!


    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.

Thread Participants: 1