ExtJs Simple Grid - Paging

Example of paging in Grid

by redoak2000

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<!-- corresponding blog at http://blog.jardalu.com/2013/6/21/grid-paging-extjs-sencha -->
<title>ExtJs - Paging in Grid</title>
<div id="example-grid"></div>

CSS

body {
    padding: 50px 20px 0 20px;
}

JavaScript

Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
]);

var TOTAL = 94; //random

var fetchedData = function(){
    this.data = null;
    this.total = 0;
}

function getRandomDate() {
    var from = new Date(1900, 0, 1).getTime();
    var to = new Date().getTime();
    var date = new Date(from + Math.random() * (to - from));
    
    return Ext.Date.clearTime(date);
}


function createFakeData(page, count) {
        var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe'];
        var lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias'];
            
        var data = [];
        for (var i = 0; i < count ; i++) {
            var dob = getRandomDate();           
            var firstNameId = Math.floor(Math.random() * firstNames.length);
            var lastNameId  = Math.floor(Math.random() * lastNames.length);
            var name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

            var id = 1 + (page-1) * count + i;
            if ( id > TOTAL ) break;
            data.push([id, name, dob]);
        }
        return data;
    }

Ext.onReady(function(){
    Ext.define('Person',{
        extend: 'Ext.data.Model',
        fields: [ { name:'Id', type: 'int' }, 'Name', 'dob']
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        pageSize : 20,
        proxy: {
            type: 'memory',
            reader: {type: 'array', root : 'data', totalProperty : 'total'}
        },
        sorters: [{
            property : 'Id',
            direction:'ASC'
        }],
        listeners : {
            beforeload : function(store, operation, eOpts){
                var page = operation.page;
                var limit = operation.limit;  
                fetchedData.data = createFakeData(page, limit);
                fetchedData.total = TOTAL;
                store.proxy.data = fetchedData;
            }
        }
    });

    // create the grid
   ...