extjs之在 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'} 
 
    ] 
}); 

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

我已经在我的 View 中设置了分页栏:

    { 
            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 .所以你需要的是使用两个商店:

“远程”存储仅从服务器端加载数据；

配置了内存代理的本地分页存储。一旦加载自身，数据将从远程存储加载:

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

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