extjs4 grid sample

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']
    });
    
    Ext.define('Ext.PagingToolbarWithNumber', {
        extend: 'Ext.toolbar.Paging',
        displayInfo: true,
        stateIdPageSize: 'pageSize',
        stateIdStart: 'start',

        initComponent: function () {
            this.stateManager = Ext.state.Manager.getProvider();

            this.numberOfEntriesField = Ext.create('Ext.form.NumberField', {
                cls: 'x-tbar-page-number',
                listeners: {
                    specialkey: function (thisField, ev) {
                        if (ev.getKey() == ev.ENTER) {
                            Event.stop(ev);
                            this.fireEvent('change', thisField, thisField.getValue(), thisField.startValue);
                        }
                    }
                },
                minValue: 1,
                maxValue: 999,
                name: 'pageSize',
                stateful: this.stateful,
                stateId: this.stateId + '.' + this.stateIdPageSize,
                width: 50
            });

            if (this.stateful) {
                this.numberOfEntriesField.setValue(this.stateManager.get(this.stateId + '.' + this.stateIdPageSize, this.pageSize));
            } else {
                this.numberOfEntriesField.setValue(this.getStore().pageSize);
            }

            this.numberOfEntriesField.on('change', function (noef, newVal, oldVal) {
                if (noef.isValid()) {
                    noef.clearInvalid();
                    this.getStore().pageSize = newVal;
                    this.moveFirst();
                } else {
                    noef.markInvalid();
                }
            }, this);

            this.items = [
                '-', {
                xtype: 'tbtext',
                text: 'with'
            },
            this.numberOfEntriesField, {
                xtype: 'tbtext',
                text: 'Items'
            }];

            this.callParent(arguments);

            this.on('change', this.checkPageNumber, this, {});
        },

        // doLoad overwrite to save the state
        doLoad: function (start) {
            var o = {};
            var pn = this.getParams();
            /* read start and pageSize
             * only if first call and stateful is true */
            if (!this.store.lastOptions && this.stateful) {
                start = this.stateManager.get(this.stateId + '.' + this.stateIdStart, start);
                this.pageSize = this.stateManager.get(this.stateId + '.' + this.stateIdPageSize, this.pageSize);
            }
            o[pn.start] = start;
            o[pn.limit] = this.pageSize;
            if (this.store.lastOptions) {
                Ext.applyIf(o, this.store.lastOptions.params);
            }
            if (this.fireEvent('beforechange', this, o) !== false) {
                this.store.reload({
                    params: o
                });
            }
            /* store the start and pageSize value */
            if (this.stateful) {
                this.stateManager.set(this.stateId + '.' + this.stateIdStart, this.store.lastOptions.params.start);
                this.stateManager.set(this.stateId + '.' + this.stateIdPageSize, this.pageSize);
            }
        },

        checkPageNumber: function () {
            /* prevent showing page 2 of 1 */
            if (this.getPageData().activePage > this.getPageData().pages) {
                this.moveFirst();
            }
        }

    });

    // 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
    Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
            text: "Id",
            width: 30,
            dataIndex: 'Id'
        }, {
            text: "Name",
            flex: 1,
            dataIndex: 'Name'
        }, {
            text: "DOB",
            width: 130,
            dataIndex: 'dob',
            renderer: Ext.util.Format.dateRenderer('M d, Y')
        }],
        // extended paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbarWithNumber', {
            store: store,
            displayInfo: true
        }),
        renderTo: 'example-grid',
        width: 550,
        height: 280
    });

    // trigger the data store load
    store.loadPage(1);
});

copy from http://jsfiddle.net/carte/tuz8qhpx/