Question

i am trying to get infinite scroll to work and have gone thru the relevant blogs and posts but cannot figure out why when my verticalscroller reaches the numfromedge it does not fire any request to the server ?

Have i understood this correctly, that when the vertical scroller reaches the numfromedge a request will be fired by the store to the server ? which implies that on the server side we have to manage the querying and return by pages ?
or do i return all records at once from the server ? Because if i set the leadingBufferedZone to say 100 and purgePageCount to 0 then there are there are about 7 requests made each of size 50 to the server ? But in this case as you can see this does not happen on numfromedge but right at the beginning …

My grid

Ext.define('AM.Something', {
extend : 'Ext.grid.Panel',
alias : 'widget.something',
title : 'something',
store : 'somethingStore',
    verticalScroller: {
        numFromEdge: 10,
        trailingBufferZone: 10,
        leadingBufferZone: 10
    },
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection:true,

selType : 'rowmodel',
features : [ somefiltering],
plugins : // Row editing plugin ....

My Store

Ext.define('AM.somethingStore', {
extend: 'Ext.data.Store',
model: 'AM.somethingModel',
autoLoad : true,
autoSync: true,
//    remoteSort:true,
buffered : true,
//    leadingBufferedZone:100,
//    purgePageCount:0,
pageSize:50,
proxy: {
    type: 'ajax',
    api :
        {
            read : 'something/fetch',
            update:'something/update',
            create :'something/create',
            destroy : 'something/delete'
        },
    reader :
        {
        type : 'json',
        root : 'someList.content', // an array of rows for the grid
        successProperty : 'success',
        idProperty : 'id',
        totalProperty: 'total'
        },

    writer :
        {
        type : 'json',
        allowSingle : true
        }

}

I use spring-data and spring controllers at the backend

  @RequestMapping(value = "/something/fetch", method = RequestMethod.GET)
public @ResponseBody
Map<String, ? extends Object> fetchPricing(@RequestParam Integer page,  @RequestParam Integer limit ) {
 Page<Somethings> someList= someService.fetchSomething(page-1,limit);
 Map<String, Object> responseMap = new HashMap<String, Object>();
 responseMap.put("success", true);
 responseMap.put("someList", someList);
return responseMap;
    }

I was expecting that when the scrollbar would reach within 10 of the last records displayed in the grid the store would send a request to the server for page2 and the pagesize limit ..

Is there anything configured incorrectly ?

Thanks in advance

Answer 1

Store

//autoLoad : true,
autoSync: true,
//remoteSort:true,
remoteFilter:true,
buffered : true,
leadingBufferedZone:200,
purgePageCount:0,
pageSize:50

Grid

verticalScroller: {
        numFromEdge: 10,
        trailingBufferZone: 10,
        leadingBufferZone: 10
    },
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection:true,