ExtJS 7：如何从响应头获取总数实现Ajax Store网格分页

一、从响应头读取总数 #

通过Ajax代理的reader.transform函数或store的load事件，可从响应头提取总数并同步给store，保证分页工具栏正常工作：

方式1：利用Reader的transform函数 #

store: Ext.create('Ext.data.Store', {
    pageSize: globals.settings.items_per_page,
    fields: ['AccountNumber', 'Pan', 'OfflineFactId', 'TransactionJalaliDate', 'BranchDescription', 'GroupCode', 'GroupDescription'],
    proxy: {
        type: 'ajax',
        url: newUrl.replace(/{accountId}/g, account.AccountNumber),
        limitParam: 'pageSize',
        pageParam: 'pageNumber',
        reader: {
            type: 'json',
            rootProperty: 'result.generalResult',
            transform: function(data, response) {
                // 从响应头获取总数，此处假设头字段为X-Total-Count
                const total = response.getResponseHeader('X-Total-Count');
                if (total) {
                    this.totalCount = parseInt(total, 10);
                }
                return data;
            }
        }
    },
    autoLoad: true
})

方式2：监听Store的load事件 #

store: Ext.create('Ext.data.Store', {
    pageSize: globals.settings.items_per_page,
    fields: ['AccountNumber', 'Pan', 'OfflineFactId', 'TransactionJalaliDate', 'BranchDescription', 'GroupCode', 'GroupDescription'],
    proxy: {
        type: 'ajax',
        url: newUrl.replace(/{accountId}/g, account.AccountNumber),
        limitParam: 'pageSize',
        pageParam: 'pageNumber',
        reader: {
            type: 'json',
            rootProperty: 'result.generalResult'
        }
    },
    listeners: {
        load: function(store, records, successful) {
            if (successful) {
                const response = store.getProxy().getReader().rawResponse;
                const total = response.getResponseHeader('X-Total-Count');
                if (total) {
                    store.setTotalCount(parseInt(total, 10));
                }
            }
        }
    },
    autoLoad: true
})

注意：跨域场景下，后端需配置Access-Control-Expose-Headers暴露自定义响应头，否则前端无法读取。

二、手动设置总数 #

若后端无法返回总数，可通过setTotalCount()直接指定总记录数：

场景1：已知固定总数 #

store: Ext.create('Ext.data.Store', {
    pageSize: globals.settings.items_per_page,
    fields: ['AccountNumber', 'Pan', 'OfflineFactId', 'TransactionJalaliDate', 'BranchDescription', 'GroupCode', 'GroupDescription'],
    proxy: {
        type: 'ajax',
        url: newUrl.replace(/{accountId}/g, account.AccountNumber),
        limitParam: 'pageSize',
        pageParam: 'pageNumber',
        reader: {
            type: 'json',
            rootProperty: 'result.generalResult'
        }
    },
    listeners: {
        load: function(store) {
            // 手动设置总记录数为100
            store.setTotalCount(100);
        }
    },
    autoLoad: true
})

场景2：前端分页时计算总数 #

如果后端返回全部数据，可直接用返回记录数作为总数：

store: Ext.create('Ext.data.Store', {
    pageSize: globals.settings.items_per_page,
    fields: ['AccountNumber', 'Pan', 'OfflineFactId', 'TransactionJalaliDate', 'BranchDescription', 'GroupCode', 'GroupDescription'],
    proxy: {
        type: 'ajax',
        url: newUrl.replace(/{accountId}/g, account.AccountNumber),
        reader: {
            type: 'json',
            rootProperty: 'result.generalResult'
        }
    },
    listeners: {
        load: function(store, records) {
            store.setTotalCount(records.length);
            // 触发前端分页逻辑
            store.loadPage(1);
        }
    },
    autoLoad: true
})

核心提示 #

setTotalCount()是保证分页功能正常的关键方法，它会同步更新store的总记录数，让PagingToolbar正确渲染分页按钮和统计信息。

内容的提问来源于stack exchange，提问作者Amir H Fadaee