如何在Grid Extjs上添加Paging

Question

我正在使用网格来显示工作正常的数据，但现在我想在网格上添加分页。我附上了分页的截图，我希望按原样申请。

我无法在网格上使用分页。请帮我解决这个问题。 我已在下面附上我的完整代码

 <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: 'a@simpsons.com', age: 19 },
            { name: 'Test2', email: 'b@simpsons.com',  age: 23 },
            { name: 'Test3', email: 'c@simpsons.com',  age: 45 },
            { name: 'Test4', email: 'd@simpsons.com', age: 32 },
            { name: 'Test5', email: 'e@gmail.com',  age: 22 },
              { name: 'Test6', email: 'f@gmail.com',  age: 23 },
              { name: 'Abh', email: 'g@gmail.com',  age: 22 },
              { name: 'Test7', email: 'ashu@gmail.com',  age: 29 },
              { name: 'Gt', email: 'Gt@gmail.com', age: 24 },
                { name: 'Mg', email: 'Mg@gmail.com', 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>

我的输出是 - ：

Answer 1

如果您想在网格中进行分页，我们需要通过赋予网格的bbar属性来在网格中添加分页工具栏。

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

我们需要创建一个分页存储，就像你在使用本地数据一样。我们需要使用PagingMemory代理。

  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: 'a@simpsons.com', age: 19 },
            { name: 'Test2', email: 'b@simpsons.com',  age: 23 },
            { name: 'Test3', email: 'c@simpsons.com',  age: 45 },
            { name: 'Test4', email: 'd@simpsons.com', age: 32 },
            { name: 'Test5', email: 'e@gmail.com',  age: 22 },
              { name: 'Test6', email: 'f@gmail.com',  age: 23 },
              { name: 'Abh', email: 'g@gmail.com',  age: 22 },
              { name: 'Test7', email: 'ashu@gmail.com',  age: 29 },
              { name: 'Gt', email: 'Gt@gmail.com', age: 24 },
                { name: 'Mg', email: 'Mg@gmail.com', age: 24 },


        ],               
            }


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

完整代码:(每页显示5条记录）

 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: 'a@simpsons.com', age: 19 },
            { name: 'Test2', email: 'b@simpsons.com',  age: 23 },
            { name: 'Test3', email: 'c@simpsons.com',  age: 45 },
            { name: 'Test4', email: 'd@simpsons.com', age: 32 },
            { name: 'Test5', email: 'e@gmail.com',  age: 22 },
              { name: 'Test6', email: 'f@gmail.com',  age: 23 },
              { name: 'Abh', email: 'g@gmail.com',  age: 22 },
              { name: 'Test7', email: 'ashu@gmail.com',  age: 29 },
              { name: 'Gt', email: 'Gt@gmail.com', age: 24 },
                { name: 'Mg', email: 'Mg@gmail.com', 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();
                    }
                },



            ]
        });
    });