ExtJs4 - Infinite Scrolling - How to implement on the server side?

Question

I'm really stuck at this. I have set up an endpoint that returns an array of data to my JSON RPC call made from the store. I'm expecting the grid to show only 30 records initially and then add more as I go on scrolling. I see that the pageSize only decides how much AJAX calls to make for the data. Meaning, if my data returned has 100 records, setting the pageSize to 20 makes 5 calls. But, all the 100 records are returned in every call. Besides, my infinite scroll doesn't work. Do I need to handle anything on the server side as well for making only the 30 records required and not all?

Answer 1

you need to interpret the start limit query parameters on the server side

so on initial call would be /?start=0&limit=20 so your server will return record 0-20. if you begin to scroll the next request will be /?start=20&limit=40 and you will return record 20-40.

also notice the leadingBufferZone that is the record count that gets loaded into the non visibly area to allow smooth scrolling.