单击下一个按钮时，分页不会更新视图

Question

总行数在分页中正确显示，但在单击下一个按钮时分页未更新视图。

我是 Sencha 的新手。在 Mysql 中，我返回所有行。这样我就可以限制在客户端。如果我限制后端的行，我不能在客户端拥有所有的行。

查看：List.js

/*** This view is an example list of people.
     */



Ext.define('CRUD.view.main.List', {
            extend: 'Ext.grid.Panel',
            xtype: 'home',
            requires: [
                'CRUD.store.Personnel'
            ],

            title: 'Heroes',
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                })
            ],
            layout: 'fit',
            fullscreen: true,
            store: {
                type: 'personnel',
            },
            columns: [
                { text: 'Name', dataIndex: 'name', sortable: true, flex: 1 },
                { text: 'Email', dataIndex: 'email', sortable: true, flex: 1 },
                { text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 }
            ],
            bbar: {
                store: {
                    type: 'personnel',
                },
                xtype: 'pagingtoolbar',
                displayInfo: true
            },
            // columns: [
            //     { text: 'Name', dataIndex: 'name', flex: 1 },
            //     { text: 'Email', dataIndex: 'email', flex: 1 },
            //     { text: 'Phone', dataIndex: 'phone', flex: 1 }
            // ],

            listeners: {
                select: 'onItemSelected',
            },
        });

商店：Personnel.js

Ext.define('CRUD.store.Personnel', {
        extend: 'Ext.data.Store',

        alias: 'store.personnel',

        model: 'CRUD.model.User',

        id: 'list',

        fields: [
            'name', 'email', 'phone'
        ],

        // data: [
        //     { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" },
        //     { name: 'Worf', email: "worf.moghsson@enterprise.com", phone: "555-222-2222" },
        //     { name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" },
        //     { name: 'Data', email: "mr.data@enterprise.com", phone: "555-444-4444" }
        // ],
        autoLoad: {
            start: 0,
            limit: itemsPerPage
        },
        buffered: true,
        pageSize: itemsPerPage,
        remoteSort: true,
        proxy: {
            type: 'jsonp', //cross domain calls - json parser
            url: 'http://localhost:8080/list',
            enablePaging: true,
            reader: {
                type: 'json',
                totalProperty: 'total'
            },

        },
        // proxy: {
        //     type: 'memory',
        //     reader: {
        //         type: 'json',
        //     }
        // },

});

Answer 1

bbar: { 商店：{ 类型：'人员'， }, xtype: '分页工具栏', 显示信息：真 },

我已经删除了 bbar 内的存储，它可以工作。感谢您的合作。

Answer 2

你使用 store 的方式，ExtJS 会在你每次更改页面时做一个请求，将页码参数发送到设置为 store 的 URL。

如果您想使用 ExtJS 进行客户端分页，您必须将商店的代理类型设置为 memory，将您的数据加载到商店中，然后 ExtJS Grid 将按照您的预期处理分页。

像这样发送Ext.Ajax.Request：

Ext.Ajax.request({
    url: 'http://localhost:8080/list',
    success: function(response) {
        dataStore.setProxy({
            type: "memory",
            enablePaging: true,
            data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure
        });
        dataStore.load();
    }
});

Answer 3

对于跨域，您可以调用Ext.data.JsonP.request()方法并处理响应，如下代码所示：

Ext.data.JsonP.request({
        url: 'data1.json',
        success: function (response) {
            var myData = [];
            Ext.Array.forEach(response.data, function (item) {
                myData.push({
                    name: item.name,
                    email: item.email,
                    phone: item.phone
                });
            });
            store.setProxy({
                type: "memory",
                enablePaging: true,
                data: myData
            });
            store.load();
        }
    });

查看此fiddle 以获取完整的工作示例。