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

Answer 2

I don't have personal experience with paging local data, but the Ext docs for the paging toolbar has some info and links you might find useful.

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.toolbar.Paging

Search the page for "paging with local data" to find the section I am referring to. Right below that section is a comments link. Click on that to expand the comments and read through those.

I hope this helps somewhat. Good luck!

Answer 3

Code Link

    Ext.define('School.model.Student', 
{
    extend : 'Ext.data.Model',
    idProperty : 'Id',
    fields: [
        { name: 'Id', type: 'int', defaultValue: 0 },
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ],
    validations : [{
        type : 'presence',
        field : 'firstName'
    }],
   proxy : 
    {
        type : 'ajax',

        api : 
        {
            read: '/ExampleService.svc/studentswithpaging/'
        },
        reader : 
        {
            type : 'json',
            root : 'Students',
            totalProperty : 'TotalCount'
        }

    }
});

Answer 4

Well this may be a little to late, but always ensure you are handling the paging on the server side, the paging toolbar will send a start and limit parameters to your script; hence your script must ensure it fetches data based on these parameters.

 <?php
  $start = $_GET['start'];
  $limit = $_GET['limit'];
  $sql = "SELECT * FROM table limit $start,$limit;
?>