title: ExtJS 4.2 Grid Pagination
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Model</p>
  
  <pre><code>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'
      },
  },
  });
  </code></pre>
  
  <p>Store</p>
  
  <pre><code>Ext.define('MCS.store.task.myStore', {
  extend: 'Ext.data.Store',
  requires: 'MCS.model.task.myModel',
  model: 'MCS.model.task.myModel',
  
  pageSize : 10,
  
  autoLoad: true
  });
  </code></pre>
  
  <p>GridPanel</p>
  
  <pre><code>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();
  }
  });
  </code></pre>