ExtJS 6.2 modern中如何为grid添加分页工具栏并解决配置报错

API 探路者

2026-10-1

ExtJS 6.2 Modern版本Grid分页功能配置方案

报错原因

你遇到的报错是因为ExtJS 6.2 Modern的分页工具栏插件和更高版本的配置别名不一致，高版本使用的pagingtoolbar简写在6.2版本中未注册对应映射，导致框架无法识别插件类抛出错误。

正确配置步骤

步骤1：配置支持分页的Store

分页功能依赖Store的分页配置，必须提前设置pageSize和接口读数字段：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'store.mystore',
    // 配置每页展示条数
    pageSize: 10,
    proxy: {
        type: 'ajax',
        url: '你的后端数据接口地址',
        reader: {
            type: 'json',
            rootProperty: 'data',
            // 配置后端返回总条数的字段名，必须和接口返回对应
            totalProperty: 'total'
        }
    },
    autoLoad: true
});

步骤2：配置Grid的分页插件

6.2版本中必须使用正确的插件别名gridpagingtoolbar进行配置：

Ext.define('MyGrid', {
    extend: 'Ext.grid.Grid',
    store: 'mystore',
    plugins: [{
        type: 'gridpagingtoolbar',
        // 配置分页条停靠位置，可选值top/bottom，默认bottom
        dock: 'bottom',
        // 可选配置：自定义每页条数下拉选项
        pageSizes: [10, 20, 50, 100],
        // 可选配置：隐藏刷新按钮
        hideRefresh: false
    }]
});