自定义缓冲网格分页参数：如何将分页参数放入POST请求体而非URL参数？

我之前刚好解决过完全一样的需求——把ExtJS分页参数从URL查询串移到POST请求体里，不用去修改prefetchPage那么复杂，给你一套可行的实现方案：

1. 核心配置：修改Store的Proxy #

首先要调整Store代理的几个关键参数，让请求默认用POST，并把参数序列化为JSON放到请求体：

Ext.define('MyApp.store.MyDataStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.MyDataModel',
    pageSize: 100, // 对应你的limit=100
    remoteSort: true, // 如果需要远程排序保留，不需要可以删掉
    remoteFilter: true, // 远程过滤同理
    proxy: {
        type: 'ajax',
        url: '/serviceCall',
        method: 'POST', // 强制使用POST请求
        paramsAsJson: true, // 自动把所有参数转成JSON放在请求体
        actionMethods: {
            read: 'POST' // 确保读取数据的操作使用POST
        },
        reader: {
            type: 'json',
            rootProperty: 'data', // 替换成后端返回的数据集字段名
            totalProperty: 'total' // 后端返回的总记录数字段名
        }
    }
});

2. 添加自定义参数（比如你的pagingId） #

如果要加入pagingId这类额外参数，有两种方式：

静态参数（固定值） #

直接在proxy的extraParams里配置：

proxy: {
    // ...其他配置
    extraParams: {
        pagingId: 'your-fixed-uuid-here'
    }
}

动态参数（每次请求生成新值） #

通过Store的beforeload事件动态添加，比如生成新的UUID：

listeners: {
    beforeload: function(store, operation) {
        // 这里替换成你实际的UUID生成逻辑
        const newPagingId = Ext.id(null, 'paging-'); 
        // 把参数添加到当前请求中，会自动放到请求体
        operation.setParams({
            pagingId: newPagingId
        });
    }
}

3. 无限滚动Grid的特殊处理 #

如果你用的是无限滚动（Infinite Scroll）Grid，偶尔会遇到参数还是跑到URL里的情况，这时候可以重写proxy的buildRequest方法，强制把所有参数移到请求体：

proxy: {
    type: 'ajax',
    // ...其他配置
    buildRequest: function(operation) {
        const request = this.callParent(arguments);
        // 将URL参数全部转移到请求体的JSON中
        if (request.params) {
            request.jsonData = Ext.apply({}, request.jsonData || {}, request.params);
            delete request.params;
        }
        return request;
    }
}

验证请求格式 #

配置完成后，打开浏览器开发者工具的Network面板，触发分页请求，你会看到：

• 请求方法是POST
• 请求URL是/serviceCall（没有查询串）
• 请求体是你想要的JSON格式：{"start":0,"limit":100,"pageIndex":1,"pagingId":"xxx"}

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