View Full Version : Infinite Scrolling 4.1

11 Oct 2012, 10:43 AM
I've been having a hard time getting infinite scrolling to work. Per this (http://www.sencha.com/forum/showthread.php?185483-Grid-buffered-infinite-scrolling-in-4.1) thread I have followed the instructions adding these settings to my store:

buffered: true,
pageSize: 50, // or whatever works best given your network amd DB latency
autoLoad: true

and this to my grid panel:

verticalScroller: {
numFromEdge: 5,
trailingBufferZone: 10,
leadingBufferZone: 20

I have looked at the examples in the SDK (examples/grid/infinite-scroll-grid-tuner.html in particular), which don't really help real world examples that rely on proxies. An omission in the explanation of infinite scrolling seems to be what the client-side expects from the server-side. Should the server-side be able to parse the query string parameters appended by the store proxy, such as page=0, start=100, limit=100, and return this range of results? (I assume yes, but it isn't explained anywhere) What exactly is a "page" in context of infinite scrolling? What is the expected structure of the JSON returned by the server? Should it include the number of records in the JSON response?

I'm fairly frustrated by the lack of useful examples, and lack of documentation of this feature. Plus the API seems to have changed significantly from previous versions of infinite scrolling rendering much of what I read useless.

If there is a good explanation of how infinite scrolling is suppose to work and interact with the server-side calls, I'd love to see it.

My current situation is that I have autoload and buffered set to true on my store with a reasonable pageSize. I have set up a verticalScroller object on my gridpanel. The result is that it loads the first set of results only (i.e., the number defined by pageSize) When I scroll to the bottom it doesn't prefetch and load more records into the grid.


11 Oct 2012, 12:55 PM
I found some useful information in the docs under Ext.toolbar.Paging (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging) regard the structure of the server-side responses. This information seems to be absent in the docs concerning Infinite Grid (or at the very least buried).

Also, here's the proxy url for one of the infinite grid examples. The "totalCount" property seems to be a necessary attribute for getting infinite scrolling to work.