I'm working on an application which is supported by an OData REST API. The API works fine in tools like Postman but when we try and use it with our Web App and pull the returned data (which is Json) into a Grid Panel there is an issue.

My company wants to be able to support large data sets, so we choose Ext JS based on it's BufferedStore Grid.

So the problem is we can't get it to work. The way the API is set up is based on the current OData 4 Spec. So it uses $skip and $top exactly in the same way you would use the $startParam and $limitParam within the Proxy of my Ext Store.

So for instance when I want to fetch data from my API the URL would look something like this http://127.0.0.1/odata/BEER/?$skip=0&$top=100 to fetch the first 100 rows of data,

And http://127.0.0.1/odata/BEER/?$skip=1&$top=100 to fetch the for the next 100 rows. The data is in Json and returns back with now issues outside of the BufferedStore Grid.

The Json looks like so

{"@odata.context":"http://127.0.0.1:8080/odata/$metadata#BEER_SAMPLE_LOT","value":[{"Id":17452707,"Name":"BS860-2","Barcode":"BS860-2","Sequence":2578,"Created":null,"Modified":null,"Active":true,"LikedBy":0,"FollowedBy":0,"CI_LOT_NUM":2,"CI_INTENDED_USAGE":"Turbidity Testing","CI_TRIGGER_RUNS":0},{"Id":17452798,"Name":"BS986-2","Barcode":"BS986-2","Sequence":2596,"Created":null,"Modified":null,"Active":true,"LikedBy":0,"FollowedBy":0,"CI_LOT_NUM":2,"CI_INTENDED_USAGE":"Turbidity Testing","CI_TRIGGER_RUNS":0}]}

The problem simple is that when the page loads the Grid will load the first 100 rows, but then as you scroll down the it doesn't prefetch (as the documentation and demos promise it should). It just stops at 100. Nothing we have tried will make it try and fetch the next set. How is this supposed to work?

Here is my code for the store which supports the grid.


Code:
  var oDataModel = Ext.create('Ext.data.Model',{
            fields: []
  });
 
  var oDataStore = Ext.create('Ext.data.BufferedStore', {
          storeId: 'beerStore',


          buffered: true,
          
          autoLoad: true,
     
          model: oDataModel,


          leadingBufferZone: 100,
          pageSize: 100,


          proxy:{  
            type: 'rest',
            url: http:127.0.0.1/odata/BEER
            pageParam: false, //to remove param "page"
            startParam: '$skip',
            limitParam: '$top', 
            noCache: false, //to remove param "_dc"
            method: 'GET',
            withCredentials: true,
    
            headers : {
                "Content-Type": "text/json",
            },
            reader:{
              type:'json',
              rootProperty: 'value',
            },
            listeners: {
                exception: function(proxy, response, operation, eOpts) {
                    console.log("Exception");
                    console.log(response);
                }
            }
          }


        });
How does the bufferedRendered fire? Is there a way to listen for a scroll event and fire the next fetch?

Any suggestions are appreciated.