I am working on an app where loading all data from the beginning is not really an inconvenient.
I am getting JSON data from a server through Ajax, and my store for doing that is pretty simple:
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
});
This is my model:
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'}
]
});
What I would like to achieve is paging the already loaded data. I tried specifying the type to 'memory' which didn't load anything as well as 'pagingmemory', which caused the browser to die (I don't know why).
I have already the paging bar set up on my 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
}],
}
It shows up correctly but it just loads all data on the first page.
Paging of already loaded data is achieved with Ext.data.proxy.Memory
configured with enablePaging: true
. So what you need is to use two stores:
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
Full working example: https://fiddle.sencha.com/#fiddle/pim