Extjs bufferedStore infinite scroll not working to trigger Ajax calls-CodePudding

I have a buffered store that makes an ajax call. I have about 40 records in total. I want the multiple ajax calls to be triggered on scrolling the page. However, as soon as I load the page I see the multiple ajax calls being made even without scrolling. What change is needed to make this behavior happen only when I scroll the page(i.e, subsequent ajax calls made only on scrolling)? Any help would be great!

My buffered store is as below:

Ext.define('myStore', {
extend: 'Ext.data.BufferedStore',

requires: [
    'myStoremodel' // model that the store takes in 
],

storeId: 'myTeststore',

model: 'myStoremodel',

remoteSort: true,
buffered: true,
leadingBufferZone: 2,
trailingBufferZone: 2,
pageSize: 10,
proxy: {
    type: 'ajax',
    url: "/fetch/getNameList" // the API which returns data to load,
    timeout: 5 * 60 * 1000,
    reader: {
        rootProperty: 'data.name',
        totalProperty: 'data.recordSize'
    },
    simpleSortMode: true
}
});

The result of ajax call is as below: The payload that gets sent is:

_dc: 1647375142598
page: 1
start: 0
limit: 10

The ajax call response:

{success: true, errorCode: 0, errorMsg: null,…}
data: {recordSize: 10, limit: 9,…}
name: [{id: 1234, name: "Jake_Mar142022", appId: 1, isClosed: null,…},…]
0: {id: 1234, name: "TimMar142022", appId: 1, isClosed: null,…}
1: {id: 1252, name: "RatMar142022", appId: null, isClosed: null,…}
2: {id: 1253, name: "MycahMar142022", appId: null, isClosed: null,…}
3: {id: 1238, name: "MeganMar142022", appId: null, isClosed: null,…}
4: {id: 1191, name: "MikeMar092022", appId: null, isClosed: null,…}
5: {id: 1271, name: "TomMar142022", appId: null, isClosed: null,…}
6: {id: 1211, name: "RamMar092022", appId: null, isClosed: null,…}
7: {id: 1212, name: "JustinMar092022", appId: 1, isClosed: null,…}
8: {id: 1213, name: "AnnieMar092022", appId: null, isClosed: null,…}
9: {id: 1231, name: "AnnMar142022", appId: null, isClosed: null,…}
limit: 9
recordSize: 41
errorCode: 0
errorMsg: null
success: true

CodePudding user response：

You have multiple calls because extjs tries to grab as many data, as it needs to fill the visible grid PLUS 2.

If you can see 26, this would do 4 initial calls.

To get a single call you would need to set pageSize to 30.

I you want to have less calls you have to increase the pageSize in the proxy, which increases the limit.