出现Ext grid分页工具栏但不进行分页

Question

我的网格有问题，我添加了 pagingtoolbar 插件，它是可见的，但不允许分页。

在其他系统网格中，我有相同的配置，完全相同，并且运行完美。

Ext.define('SIEM.agents.Grid',{
    extend: 'Ext.grid.Grid',
    xtype: 'siem-agents-grid',
    requires: ['Ext.grid.plugin.PagingToolbar'],
    cls: 'custom-grid',
    bind: {
        store: '{agents}',
    },
    title: 'Agents',
    plugins: {
        pagingtoolbar: true
    },
    items: [{
        xtype: 'toolbar',
        docked: 'top',
        items: [{
                xtype: 'textfield',
                placeholder: 'Search',
                flex: 1
            },{
                xtype: 'button',
                text: 'Refresh',
                ui: 'action',
                margin: '0 0 0 5',
                handler: 'loadMainStore'
            }
        ]
    }],
    columns: [{
        text: 'ID',
        width: 75,
        dataIndex: 'id'
    },{
        text: 'Name',
        flex: 0.5,
        dataIndex: 'name'
    },{
        text: 'IP address',
        flex: 0.5,
        dataIndex: 'ip',
        sortable: false
    },{
        text: 'Group(s)',
        width: 75,
        dataIndex: 'group',
        sortable: false,
        align: 'center',
    },{
        text: 'Operating system',
        flex: 1,
        tpl: '{os.name}',
        sortable: false,
    },{
        text: 'Cluster node',
        width: 100,
        dataIndex: 'node_name',
        sortable: false,
        align: 'center',
    },{
        text: 'Version',
        width: 100,
        dataIndex: 'version',
        align: 'center',
    },{
        text: 'Status',
        width: 120,
        dataIndex: 'status',
        align: 'center',
        renderer: 'rendererStatusgrid'
    },{
        text: 'Actions',
        width: 75,
        sortable: false
    }],
})

视图模型：

Ext.define('SIEM.agents.MainModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.siem-agents-main',
    requires: ['SIEM.model.Agents'],
    stores: {
        agents: {
            model: 'SIEM.model.Agents',
            autoLoad: true,
            pageSize: 9,
            // remoteSort: false
        }
    }
});

型号：

Ext.define('SIEM.model.Agents', {
    // extend: 'SIEM.model.Base',
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'status_code', type: 'string'},
        { name: 'status', type: 'string' },
        { name: 'version', type: 'string' },
        { name: 'name', type: 'string' },
        { name: 'ip', type: 'string' },
        { name: 'mergedSum', type: 'string' },
        { name: 'manager', type: 'string' },
        { name: 'group_config_status', type: 'string' },
        { name: 'group', type: 'auto' },
        { name: 'configSum', type: 'string' },
        { name: 'registerIP', type: 'string' },
        { name: 'lastKeepAlive', type: 'string' },
        { name: 'dateAdd', type: 'date' },
        { name: 'node_name', type: 'string' },
        { name: 'disconnection_time', type: 'date' },
        { name: 'os', type: 'auto' },
    ],
    proxy: {
        type: 'rest',
        // type: 'rest-new-api', 
        url: `${Ext.manifest.apiUrl}/siem/agents`,
        reader: {
            type: 'json',
            rootProperty: 'data.affected_items',
        },
        writer: {
            type: 'json',
        },
    }
});

在其他模型中我只将类型更改为rest，并且分页正常工作，之前使用过rest-new-api类型，但它不起作用

后端配置正确接收参数。

提前致谢

Answer 1

可以这样解决：

Ext.define('SIEM.model.Agents', {
    // extend: 'SIEM.model.Base',
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'status_code', type: 'string'},
        { name: 'status', type: 'string' },
        ... rest of the code
        { name: 'os', type: 'auto' },
    ],
    proxy: {
        type: 'rest',
        url: `${Ext.manifest.apiUrl}/siem/agents`,
        reader: {
            type: 'json',
            rootProperty: 'affected_items',
            totalProperty: 'total_affected_items'  <-- inserting this property
        },
        writer: {
            type: 'json',
        },
    }
});