分页工具栏异常：第二页不显示且点击下一页数据闪回问题

看起来你遇到了ExtJS分页场景里的典型重复请求问题，我来帮你拆解下可能的原因和对应的解决办法：

1. 排查autoLoad配置的冲突 #

从你给出的代码片段看，store设置了autoLoad: tr...（推测是true），这很可能是触发两次请求的核心原因：当你点击「下一页」时，分页控件会触发一次带page=2参数的请求，但store的autoLoad: true会在某些时机（比如参数变更后）重新触发默认参数的请求（page=1），后者的响应会直接覆盖刚加载的第二页数据。

解决办法：

• 明确指定初始加载的分页参数，避免无意义的默认请求：

  stores: {
      storeItemsAll: {
          type: 'store',
          autoLoad: {page: 1, start: 0}, // 明确加载第一页
          // 其他配置...
      }
  }
  

• 或者放弃autoLoad，在视图初始化时手动触发首次加载（比如在控制器的init方法中）：

  this.getViewModel().getStore('storeItemsAll').loadPage(1);
  

2. 确保分页参数与分页工具栏匹配 #

分页工具栏的pageSize必须和store的pageSize完全一致，否则工具栏无法正确计算总页数，导致第二页选项不显示。

检查并同步配置：

stores: {
    storeItemsAll: {
        type: 'store',
        pageSize: 20, // 与分页toolbar的pageSize保持一致
        // 其他配置...
    }
}

// 分页工具栏配置
{
    xtype: 'pagingtoolbar',
    store: '{storeItemsAll}', // 通过ViewModel绑定store
    pageSize: 20,
    displayInfo: true
}

3. 检查参数是否被意外重置 #

有时候在beforeload事件监听或代理的buildUrl方法中，会不小心重置分页参数（比如把page强行设回1），导致第二次请求异常。

可以添加日志排查：

stores: {
    storeItemsAll: {
        type: 'store',
        listeners: {
            beforeload: function(store, operation) {
                console.log('当前加载参数:', operation.getParams()); // 查看page参数是否正确
            }
        },
        // 其他配置...
    }
}

如果发现参数被篡改，排查代码中修改operation参数的逻辑。

4. 验证后端返回的总记录数 #

ExtJS的分页依赖后端返回的总记录数来计算总页数，如果后端没有返回totalCount（或字段名不匹配），分页工具栏会认为只有一页，自然不会显示第二页。

确保代理配置正确指定了总记录数字段：

proxy: {
    type: 'API',
    url: '/your-item-api',
    reader: {
        type: 'json',
        rootProperty: 'items', // 数据数组的字段名
        totalProperty: 'totalCount' // 与后端返回的总记录数字段名一致
    }
}

内容的提问来源于stack exchange，提问作者Andriy Yushko