PDA

View Full Version : ExtJS 4.2 Grid Paging



hermann.s
4 Nov 2013, 7:27 AM
I want to have client side pagination for a grid panel that receives data through a web service, but I am not sure how to proceed with this.

This is my code so far.
The paging toolbar displays the correct number of pages, however, all the results are displayed in the first page. Going forward and back in the pages doesn't make any difference.


Ext.define('MCS.model.task.myModel', {
extend: 'Ext.data.Model',
fields:
[
{ name: 'Case_ID', type : 'Auto' },
{ name: 'BP_Name', type : 'Auto' },
{ name: 'Project', type : 'Auto' }
],


proxy:
{
type: 'ajax',
url: '/Service/Task?type=mytasks',
reader:
{
type: 'json',
root: 'data'
},
},
});


Ext.define('MCS.store.task.myStore', {
extend: 'Ext.data.Store',
requires: 'MCS.model.task.myModel',
model: 'MCS.model.task.myModel',


pageSize : 10,


autoLoad: true
});


Ext.define('MCS.view.task.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',


itemId: 'myTaskGrid',
title: 'My Tasks',


store: 'task.myStore',
columns: [],


dockedItems:
[
{ xtype: 'myToolbar',
dock: 'top',
},
{ xtype: 'pagingtoolbar',
dock: 'bottom',
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No data to display',
store: 'task.myStore'
}
],


initComponent: function ()
{
this.columns =
[
{ text: 'Case ID', dataIndex: 'Case_ID' },
{ text: 'Business Partner Name', dataIndex: 'BP_Name' },
{ text: 'Project', dataIndex: 'Project' }
];


this.callParent();
}
});

scottmartin
6 Nov 2013, 2:32 PM
How many records are you returning? You should only return the amount you want from server.

return from server:
{ total: 100, [ 10 records; 1-10 ] } // 1st page
{ total: 100, [ 10 records; 11-20 ] } // 2nd page
..
{ total: 100, [ 10 records; 91-100 ] } // last page


Scott.

khatuido
7 Nov 2013, 3:07 AM
Your code is to got server side pagination.

In Ext 4.2 for get client side pagination, you need use proxy "pagingmemory"
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.data.PagingMemoryProxy

This second way will load once the data, then do local pagination without reload your data.