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

Question

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

Answer 1

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.