Ext JS 4 - Paging toolbar only shows first page - extjs

Question

I have a basic gridpanel that is fed from a store with 600 records, but my paging toolbar only shows the first page, regardless of the pageSize config in the store. For example...
When pageSize = 50, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 50 of 50
When pageSize = 100, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 100 of 100
Thoughts? Source below.
employee_store.js
var empUrlRoot = 'http://extjsinaction.com/crud.php'
+ '?model=Employee&method=';
//Instantiate employee store
var employeeStore = Ext.create('Ext.data.Store', {
model: 'Employee',
pageSize: 50,
proxy: {
type: 'jsonp',
api: {
create: empUrlRoot + 'CREATE',
read: empUrlRoot + 'READ',
udpate: empUrlRoot + 'UPDATE',
destroy: empUrlRoot + 'DESTROY'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: true,
batch: false,
writeRecords: function(request, data){
request.jsonData = data;
return request;
}
}
}
});
gridpanel.js
Ext.onReady(function(){
// gridpanel column configurations
var columns = [
{
xtype: 'templatecolumn',
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 50,
resizable: false,
hidden: true,
// template renders id column blue:
tpl: '<span style="color: #0000FF;">{id}</span>'
},
{
header: 'Last Name',
dataIndex: 'lastName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'First Name',
dataIndex: 'firstName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'Address',
dataIndex: 'street',
sortable: false,
flex: 1,
// template renders column with additional content:
tpl: '{street}<br />{city} {state}, {zip}'
}
];
// Configure the gridpanel paging toolbar
var pagingtoolbar = {
xtype: 'pagingtoolbar',
store: employeeStore,
dock: 'bottom',
displayInfo: true
};
// Create gridpanel
var grid = Ext.create('Ext.grid.Panel', {
xtype: 'grid',
columns: columns,
store: employeeStore,
loadMask: true,
selType: 'rowmodel',
singleSelect: true,
stripeRows: true,
dockedItems: [
pagingtoolbar
]
});
// Configure and create container for gridpanel
Ext.create('Ext.Window', {
height: 350,
width: 550,
border: false,
layout: 'fit',
items: grid //the gridpanel
}).show();
// Load the employeeStore
employeeStore.load();
});
employee_model.js
// Define employee model
Ext.define('Employee', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id',type: 'int'},
{name: 'departmentId', type: 'int' },
{name:'dateHired', type:'date', format:'Y-m-d'},
{name:'dateFired', type:'date', format:'Y-m-d'},
{name:'dob', type:'date', format: 'Y-m-d'},
'firstName',
'lastName',
'title',
'street',
'city',
'state',
'zip'
]
});

Answer 1

You have to return total record count.
reader: {
root : 'data',
totalProperty: 'total' // this is default, you can change it
}
Next in server response you need:
{
data : ['your data here'],
total : 2000
}