PDA

View Full Version : Client Side Pagination!



nckenn
6 Aug 2014, 5:57 PM
Client Side Paging!

how can i implement client side pagination in grid panel. i retrieve my data using ajax, but i want to create a paging in local not in remote. can anyone give me a complete example or just help me to fix my code.

this is my model :


if (! Ext.ClassManager.isCreated('personalModel')) {
Ext.define('personalModel', {
extend: 'Ext.data.Model',
idProperty: 'ofc_code',
fields: [
{
name : 'ofc_code',
type : 'string'
},
{
name : 'ofc_desc',
type : 'string'
},
{
name : 'appropriation',
type : 'number'
},
{
name : 'allocation_total',
type : 'number'
},
{
name : 'obligation',
type : 'number'
},
{
name : 'bappro',
type : 'number'
},
{
name : 'ballo',
type : 'number'
}
]
});
}


Store:


me.storePersonal = Ext.create('Ext.data.Store',{
model : 'personalModel',
autoLoad: false,
pageSize: 10,
proxy : {
type: 'ajax',
url: 'ExtDesk.php',
method:'GET',
enablePaging: true,
extraParams: {
Module: 'SAAOB',
option: 'Personal_Services',
action: 'List'
},
reader: {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty: 'total'
}

}
});


GridPanel:


id : 'PersonalGrid', xtype: 'gridpanel',
columnLines: true,
loadMask: { msg: Config.load_mask, store: me.storePersonal },
viewConfig: { emptyText: Config.grid_no_data },
store: me.storePersonal,
region:'center',
layout: 'fit',
//forceFit: true,
listeners: {
celldblclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
me.viewDetail(record.get('ofc_code'),'100','Personal Services');
}
},
plugins: ['quickfilter',{
ptype: 'bufferedrenderer',
trailingBufferZone: 20, // Keep 20 rows rendered in the table behind scroll
leadingBufferZone: 50 // Keep 50 rows rendered in the table ahead of scroll
}],
columns: [
{
some data .....
}
]


thank you in advance :)

skirtle
7 Aug 2014, 12:49 AM
You need to use:

examples/ux/data/PagingMemoryProxy.js

You'd need to load the data yourself and pass it into the PagingMemoryProxy rather than loading it through the proxy.

nckenn
7 Aug 2014, 5:26 PM
thank you for the reply, can you provide an example on how to use it? thanks :)

skirtle
8 Aug 2014, 1:00 AM
You use it like a memory proxy.

Take a look at the source code, it's pretty straightforward.