Example: Paging in ExtJS 4 Grid.

Ext.define('School.view.StudentGrid',
{

    extend: 'Ext.grid.Panel',
    alias: 'widget.StudentGrid',
    id: 'studentsGrid',
    config: {},
    constructor: function (config) {
        this.initConfig(config);
        return this.callParent(arguments);
    },
    width: '100%',
    height: 300,
    selType: 'rowmodel',
    selModel:
    {
        mode: 'SINGLE'
    },
    viewConfig:
    {
        stripeRows: true
    },
    initComponent: function () {
        Ext.apply(this,
        {
            store: 'School.store.Student',

            columns: [{
                text: "Id",
                dataIndex: 'Id',
                hidden: false,
                width: 35
            },
            {
                text: "First Name",
                flex: 1,
                dataIndex: 'firstName',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: false
                }
            },
            {
                text: "Middle Name",
                flex: 1,
                dataIndex: 'middleName',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: true
                }
            },
            {
                text: "Last Name",
                flex: 1,
                dataIndex: 'lastName',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: true
                }
            },
            {
                text: "Birth Date",
                flex: 1,
                dataIndex: 'birthDate',
                editor:
                {
                    xtype: 'datefield',
                    format: 'd-m-Y',
                    allowBlank: true
                },
                renderer: Ext.util.Format.dateRenderer('d-m-Y')
            },
            {
                text: "City",
                flex: 1,
                dataIndex: 'city',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: true
                }
            },
            {
                text: "State",
                flex: 1,
                dataIndex: 'state',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: true
                }
            }],
            bbar: {
                xtype: 'pagingtoolbar',
                store: 'School.store.Student',
                displayInfo: true,
                displayMsg: 'Displaying {0} to {1} of {2}  records ',
                emptyMsg: "No records to display "
            }
        });
        this.callParent(arguments);
    }

});

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

Ext.define('School.store.Student',
{
    extend: 'Ext.data.Store',
    model: 'School.model.Student',
    autoLoad: true,
    autoSync: false,
    storeId: 'Student',
    pageSize: 5
});

Ext.application({
    requires : ['Ext.container.Viewport', 'School.view.StudentGrid'],
    name : 'School',
    stores: ['School.store.Student'],
    
    launch : function(){
        Ext.create('Ext.container.Viewport', 
        {
            layout : 'fit',
            items : [{
                xtype : 'container',
                items : [{
                    xtype : 'StudentGrid',
                    height:200
                }]
            }]
        });
    }
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../ext-4.2.1/ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

</body>
</html>