ExtJS 4.2 Grid Pagination

Question

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.

Model

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

Store

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

pageSize : 10,

autoLoad: true
});

GridPanel

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

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();
}
});

Answer 1

Ext.define('Crm.store.Companies', {
   extend: 'Ext.data.Store',
   requires: 'Crm.model.Company',
   model: 'Crm.model.Company',
   autoLoad: {start: 0, limit: 5},
   pageSize: 5,
   remoteSort: true,
   sorters: [{
              property : 'name',
              direction: 'asc'
          }],
   proxy: {
     type: 'rest',
     url : 'service/companyList/json',
     reader: {
        type: 'json',
        root: 'companyList',
        totalProperty: 'total'
     }
   }
});