Extjs bufferedStore 无限滚动无法触发 Ajax 调用

Question

我有一个缓冲存储，可以进行 ajax 调用。我总共有大约 40 条记录。我希望在滚动页面时触发多个 ajax 调用。但是，一旦我加载页面，即使没有滚动，我也会看到多个 ajax 调用。需要做哪些更改才能使这种行为仅在我滚动页面时发生（即，仅在滚动时进行后续 ajax 调用）？任何帮助都会很棒！

我的缓冲存储如下：

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
}
});

ajax调用结果如下：发送的有效载荷是：

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

ajax呼叫响应：

{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

您有多个调用，因为 extjs 试图获取尽可能多的数据，因为它需要填充可见网格 PLUS 2。

如果您能看到 26，这将进行 4 次初始调用。

要接听单个电话，您需要将 pageSize 设置为 30。

我想减少通话次数，您必须增加代理中的 pageSize，这会增加 limit。

Extjs bufferedStore 无限滚动无法触发 Ajax 调用

Extjs bufferedStore infinite scroll not working to trigger Ajax calls

ajax

extjs

extjs4

extjs-stores

extjs4.2