EXTJS4- pagination is not proper in the grid - extjs

Question

I have set the pagesize in store and totalproperty in proxy setting and also defined dockedItems config. But in the page, all the records are displayed, instead of specified pagesize. Here is my code:
js file:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('SuperUser', {
extend: 'Ext.data.Model',
fields: [
{ name: 'fname', type: 'string' },
{ name: 'lname', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'isSup', type: 'boolean' },
{ name: 'upDate', type: 'string' },
{ name: 'upBy', type: 'string' }
]
});
//Create the grid
var superGrid=Ext.define('supusergrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.supusergrid',
title: 'Super Admin Grid',
gridId:'grid',
model:'SuperUser',
store: Ext.create('Ext.data.Store', {
storeId: 'supUserStore',
pageSize: 3,
model:'SuperUser',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'supUserStore.json',
reader: {
type: 'json',
root: 'data',
totalProperty:'total'
}
}
}),
selModel: sm,
columns: [
{
header: 'First Name',
dataIndex: 'fname'
},
{
header: 'Last Name',
dataIndex: 'lname'
},
{
header: 'Email',
dataIndex: 'email'
},
{
header: 'User ID',
dataIndex: 'uid'
},
{
header: 'Super Admin',
dataIndex: 'isSup'
},
{
header: 'Updated Date',
dataIndex: 'upDate',
},
{
header: 'Updated By',
dataIndex: 'upBy'
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('supUserStore'),
dock: 'bottom',
displayInfo: true
}],
initComponent: function () {
this.callParent(arguments);
}
});
Ext.onReady(function () {
Ext.widget('supusergrid', {
renderTo: 'div1'
});
});
json file:
{
"success": true,
"total": 12,
"data": [
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com"}
]
}
please suggest, where I am going wrong.

Answer 1

You are using an Ajax proxy. On your server, you can intercept request parameters page, start and limit. Then you create a json response with the page data.

Answer 2

Store paging isn't as smart as you seem to think it is. Just because you tell it that the page size is 3 records and that you have 12 total records doesn't mean it's going to break everything up into 4 nice pages for you.
When calling store.loadPage the store adds the start and limit params to the proxy request. When the response comes back, it assumes that you've correctly limited your result set and loads all records provided. It is your responsibility to use those params to limit the results returned to the store. Usually, this would require posting the data on a server so you can utilize these params.
Thankfully, there's a UX component that should help you out: Ext.ux.data.PagingMemoryProxy
And here's some sample code showing how it works: Sliding Pager example