How to add Paging on Grid Extjs

Question

I am using grid to show data which is working perfectly but now i want to add paging on grid. I have attached screenshot of paging which i want to apply as it is.

I am unable to use paging on my Grid. Please help me to fix this issue. I have attached my full code below

 <script type="text/javascript">

 Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email',  'age']

        });

    Ext.define('UserStore', {
        extend: "Ext.data.Store",
        model: 'User',


        data: [
            { name: 'Test1', email: '[email protected]', age: 19 },
            { name: 'Test2', email: '[email protected]',  age: 23 },
            { name: 'Test3', email: '[email protected]',  age: 45 },
            { name: 'Test4', email: '[email protected]', age: 32 },
            { name: 'Test5', email: '[email protected]',  age: 22 },
              { name: 'Test6', email: '[email protected]',  age: 23 },
              { name: 'Abh', email: '[email protected]',  age: 22 },
              { name: 'Test7', email: '[email protected]',  age: 29 },
              { name: 'Gt', email: '[email protected]', age: 24 },
                { name: 'Mg', email: '[email protected]', age: 24 },


        ]
    });
    var activityStore = Ext.create('UserStore');
    activityStore.load()


    Ext.onReady(function () {

        Ext.create('Ext.Panel', {
            renderTo: Ext.getBody(),

            margin: 4,
            padding: 4,
            width: 400,
            title: 'Sample',


            buttons: [
                {
                    text: 'Grid', handler: function () {

                        var model = new Ext.Window(
                            {

                                width: 600,
                                autoScroll: true,
                                modal: false,
                                minimizable: true,
                                maximizable: false,

                                title: 'Students',
                                listeners: {
                                    "minimize": function (window, opts) {
                                        window.collapse();
                                        window.setWidth(150);
                                        window.alignTo(Ext.getBody(), 'bl-bl')


                                    }
                                },
                                tools: [{
                                    type: 'restore',
                                    handler: function (evt, toolEl, owner, tool) {
                                        var window = owner.up('window');
                                        window.setWidth(600);
                                        window.expand('', false);
                                        window.center();
                                    }
                                }],

                                items: [{
                                    xtype: "grid",

                                    store: activityStore,

                                    title: 'Application Users',
                                    columns: [
                                               {
                                                   text: 'Name',
                                                   width: 100,
                                                   align: "center",
                                                   sortable: false,
                                                   hideable: false,
                                                   dataIndex: 'name'
                                               },
                                               {
                                                   text: 'Email Address',
                                                   width: 150,
                                                   sortable: false,
                                                   align: "center",
                                                   hideable: false,
                                                   dataIndex: 'email',
                                               },

                                                {
                                                    text: 'Age',
                                                    flex: 1,
                                                    sortable: false,
                                                    hideable: false,
                                                    align: "center",
                                                    dataIndex: 'age'
                                                }


                                    ]
                                }]
                            })
                        model.show();
                    }
                },



            ]
        });
    });
    </script>

My Output is -:

Answer 1

If you want paging in grid , we need to add pagination toolbar in grid by giving bbar property of grid.

   bbar: Ext.create('Ext.PagingToolbar', {
        store: activityStore,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        inputItemWidth: 35,
    })

And we need to make a paging store as here you are using local data.We need to use PagingMemoryproxy.

  Ext.define('UserStore', {
        extend: "Ext.data.Store",
        model: 'User',
 pageSize: 5, // records per page
         proxy: {
                type: 'memory', // paging memory proxy
                enablePaging: true,
data: [
            { name: 'Test1', email: '[email protected]', age: 19 },
            { name: 'Test2', email: '[email protected]',  age: 23 },
            { name: 'Test3', email: '[email protected]',  age: 45 },
            { name: 'Test4', email: '[email protected]', age: 32 },
            { name: 'Test5', email: '[email protected]',  age: 22 },
              { name: 'Test6', email: '[email protected]',  age: 23 },
              { name: 'Abh', email: '[email protected]',  age: 22 },
              { name: 'Test7', email: '[email protected]',  age: 29 },
              { name: 'Gt', email: '[email protected]', age: 24 },
                { name: 'Mg', email: '[email protected]', age: 24 },


        ],               
            }


    });
    var activityStore = Ext.create('UserStore');
 activityStore.loadPage(1); // loading first page

Full Code:(Showing 5 records per page)

 Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email',  'age']

        });

    Ext.define('UserStore', {
        extend: "Ext.data.Store",
        model: 'User',
 pageSize: 5,
         proxy: {
                type: 'memory',
                enablePaging: true,
data: [
            { name: 'Test1', email: '[email protected]', age: 19 },
            { name: 'Test2', email: '[email protected]',  age: 23 },
            { name: 'Test3', email: '[email protected]',  age: 45 },
            { name: 'Test4', email: '[email protected]', age: 32 },
            { name: 'Test5', email: '[email protected]',  age: 22 },
              { name: 'Test6', email: '[email protected]',  age: 23 },
              { name: 'Abh', email: '[email protected]',  age: 22 },
              { name: 'Test7', email: '[email protected]',  age: 29 },
              { name: 'Gt', email: '[email protected]', age: 24 },
                { name: 'Mg', email: '[email protected]', age: 24 },


        ],               
            }


    });
    var activityStore = Ext.create('UserStore');
 activityStore.loadPage(1);

    Ext.onReady(function () {

        Ext.create('Ext.Panel', {
            renderTo: Ext.getBody(),

            margin: 4,
            padding: 4,
            width: 400,
            title: 'Sample',


            buttons: [
                {
                    text: 'Grid', handler: function () {

                        var model = new Ext.Window(
                            {

                                width: 600,
                                autoScroll: true,
                                modal: false,
                                minimizable: true,
                                maximizable: false,

                                title: 'Students',
                                listeners: {
                                    "minimize": function (window, opts) {
                                        window.collapse();
                                        window.setWidth(150);
                                        window.alignTo(Ext.getBody(), 'bl-bl')


                                    }
                                },
                                tools: [{
                                    type: 'restore',
                                    handler: function (evt, toolEl, owner, tool) {
                                        var window = owner.up('window');
                                        window.setWidth(600);
                                        window.expand('', false);
                                        window.center();
                                    }
                                }],

                                items: [{
                                    xtype: "grid",

                                    store: activityStore,

                                    title: 'Application Users',
                                    columns: [
                                               {
                                                   text: 'Name',
                                                   width: 100,
                                                   align: "center",
                                                   sortable: false,
                                                   hideable: false,
                                                   dataIndex: 'name'
                                               },
                                               {
                                                   text: 'Email Address',
                                                   width: 150,
                                                   sortable: false,
                                                   align: "center",
                                                   hideable: false,
                                                   dataIndex: 'email',
                                               },

                                                {
                                                    text: 'Age',
                                                    flex: 1,
                                                    sortable: false,
                                                    hideable: false,
                                                    align: "center",
                                                    dataIndex: 'age'
                                                }


                                    ],
                                    bbar: Ext.create('Ext.PagingToolbar', {
            store: activityStore,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            inputItemWidth: 35,
        }),
                                }]
                            })
                        model.show();
                    }
                },



            ]
        });
    });