ExtJS分页异常：首次加载全量数据且分页按钮失效

问题现象 #

• 配置Grid分页，期望每页显示30条记录，总共有35条记录，但访问视图时Grid第一页加载全部35条数据，分页栏却显示存在两页
• 点击「下一页」按钮触发报错：

Uncaught TypeError: store.nextPage is not a function
    at constructor.moveNext (ext-all-debug.js:185314:23)
    at Object.callback (ext-all-debug.js:8705:32)
    at constructor.fireHandler (ext-all-debug.js:144259:17)
    at constructor.onClick (ext-all-debug.js:144241:16)
    at constructor.fire (ext-all-debug.js:20731:42)
    at constructor.fire (ext-all-debug.js:34336:27)
    at constructor.publish (ext-all-debug.js:34296:28)
    at constructor.publishDelegatedDomEvent (ext-all-debug.js:34318:14)
    at constructor.doDelegatedEvent (ext-all-debug.js:34361:16)
    at constructor.onDelegatedEvent (ext-all-debug.js:34349:18)

• 点击「最后一页」按钮无报错，但仍加载全部35条记录
• 服务器日志显示，访问视图时应用同时请求了第一页和第二页数据：

[20/Sep/2023:10:09:55 +0200] "GET /api/requests/?page=1 HTTP/2.0"
[20/Sep/2023:10:09:56 +0200] "GET /api/requests/?page=2 HTTP/2.0"

接口返回验证 #

Django REST Framework生成的/api/requests/?page=1接口返回内容正确，results数组包含30条数据：

{
    "count": 35,
    "next": "https://xxx.xxx/api/requests/?page=2",
    "previous": null,
    "results": [
        {
            ### 数据内容 ###
        },
    ]
}

当前Store代码 #

Ext.define('MainHub.store.requests.Requests', {
  extend: 'Ext.data.BufferedStore',
  storeId: 'requestsStore',

  requires: [
    'MainHub.model.requests.Request'
  ],

  model: 'MainHub.model.requests.Request',

  leadingBufferZone: 20,
  pageSize: 30,

  autoload{
    type: 'ajax',
    url: 'api/requests/',
    startParam: false,
    limitParam: false,
    noCache: false,
    enablePaging: true,
    reader: {
      type: 'json',
      rootProperty: 'results',
      totalProperty: 'count'
    }
  },
  remoteFilter: true
});

问题原因及修复方案 #

1. 错误选择Store类型 #

你继承了Ext.data.BufferedStore，但该Store是为虚拟滚动场景设计的，它会预加载前后数据块（比如你设置的leadingBufferZone:20），这就是页面加载时同时请求page1和page2的原因。同时BufferedStore没有nextPage方法，直接导致点击下一页时报错。如果只是普通分页需求，应该使用Ext.data.Store。

2. Store配置语法错误 #

代码中autoload拼写错误，正确应为autoLoad；且配置格式错误，不能将proxy配置写在autoLoad内，应独立配置proxy节点。

3. Proxy配置参数错误 #

• 设置startParam: false和limitParam: false会阻止ExtJS传递分页参数，但后端依赖page参数做分页，需移除这两项配置，或明确指定pageParam: 'page'适配DRF的分页规则。
• enablePaging不是Proxy的有效配置项，需移除。

修复后的Store示例 #

Ext.define('MainHub.store.requests.Requests', {
  extend: 'Ext.data.Store',
  storeId: 'requestsStore',

  requires: [
    'MainHub.model.requests.Request'
  ],

  model: 'MainHub.model.requests.Request',

  pageSize: 30,
  autoLoad: true,
  remoteFilter: true,

  proxy: {
    type: 'ajax',
    url: 'api/requests/',
    pageParam: 'page', // 明确指定分页参数，适配DRF分页逻辑
    noCache: false,
    reader: {
      type: 'json',
      rootProperty: 'results',
      totalProperty: 'count'
    }
  }
});

额外检查 #

确保Grid已正确配置分页栏，例如：

bbar: Ext.create('Ext.PagingToolbar', {
  store: 'requestsStore',
  displayInfo: true
})

内容的提问来源于stack exchange，提问作者Nicola Zilio