ajaxextjsextjs4extjs4.2extjs-stores

Extjs bufferedStore infinite scroll not working to trigger Ajax calls


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

Solution

  • 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.