Ext JS 4 - Paging toolbar only shows first page

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'
    ]
});

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
}