在 Ajax 类型的 Extjs 5 存储上进行本地分页

我正在开发一个应用程序，从一开始就加载所有数据并不是很不方便。

我通过 Ajax 从服务器获取 json 数据，而我的商店执行此操作非常简单：

Ext.define('MODIFE.store.CentroBeneficio', {
    extend  : 'Ext.data.Store',
    requires : [
        'MODIFE.model.CentroBeneficio'
    ],
    storeId : 'CentroBeneficio',
    model   : 'MODIFE.model.CentroBeneficio',
    page-size: 10,
    proxy   :{
        //type: 'memory',
        type: 'ajax',
        enablePaging: true,
        url: 'http://'+MODIFE.Global.ip+'/CentroBeneficio/GetCentroBeneficios'
    },
    autoLoad: true
});

这是我的模型：

Ext.define('MODIFE.model.CentroBeneficio', {
    extend: 'Ext.data.Model',
    storeId: 'CentroBeneficio',
    pageSize: 10,
    fields: [
        {name:'IdCentroBeneficio', type:'int'},
        {name:'CompaniaCodigo', type:'int'},
        {name:'codigo', type:'string'},
        {name:'description', type:'string'},
        {name:'complete_description', type:'string', convert : function(v, record) {return record.data.codigo+' - '+record.data.description;}},
        {name:'status', type:'int', convert : function(v, record) {return (record.data.status == 1) ? 'Activo' : 'Inactivo';}},
        {name:'name_compania', type:'string'},
        {name:'pais', type:'string'},
        {name:'IdPais', type:'int'}

    ]
});

我想要实现的是对已经加载的数据进行分页。我尝试将类型指定为“内存”，它没有加载任何内容以及“分页内存”，这导致浏览器死机（我不知道为什么）。

我已经在我的视图上设置了分页栏：

    {
            xtype: 'grid',
            id: 'centroBeneficioGrid',
            title: getLabelByKey('CentroBeneficio_SearchGridTitle_Listado'),
            store: 'CentroBeneficio',
            columns: [
                { text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Pais'),  dataIndex: 'pais', flex: 2},
                { text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Company'), dataIndex: 'name_compania', flex: 3},
                { text: getLabelByKey('CentroBeneficio_SearchColumnGrid_CentroBeneficio'), dataIndex: 'codigo', flex: 2},
                { text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Descripcion'), dataIndex: 'description', flex: 4},
                { text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Estatus'), dataIndex: 'status', flex: 2}
            ],
            listeners: {
                itemdblclick: 'CBSelectedGrid'
            },
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: 'CentroBeneficio',
                dock: 'bottom',
                displayInfo: true
            }],
        } 

它显示正确，但它只加载第一页上的所有数据。提前致谢。

已加载数据的分页是通过以下方式实现的Ext.data.proxy.Memory配置有enablePaging: true http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.proxy.Memory-cfg-enablePaging。所以你需要的是使用两个商店：

1. “远程”存储仅从服务器端加载数据；
2. 配置有内存代理的本地分页存储。一旦加载自身，数据将从远程存储加载：

pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();

完整的工作示例：https://fiddle.sencha.com/#fiddle/pim https://fiddle.sencha.com/#fiddle/pim