Extjs 单击“下一步”按钮时，分页不会更新视图

总行数正确显示在分页中，但单击“下一步”按钮时分页不会更新视图

我是新来的森查。在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',
            },
        });

商店：personal.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',
        //     }
        // },

});

---

按照您使用存储的方式，每次更改页面时，ExtJS都会发出一个请求，将page number参数发送到存储设置的URL

如果要使用ExtJS进行客户端分页，必须将存储的代理类型设置为

内存

，将数据加载到存储中，然后ExtJS网格将按预期处理分页

像这样执行

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

---

对于跨域，您可以调用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();
        }
    });

检查此项查看完整的工作示例。

bbar:{ 存储：{ 类型：“人员”， }， xtype:“pagingtoolbar”， displayInfo:true },

---

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

感谢您的回复。实际上，存在一个跨域问题。所以我使用的是JsonP。Ajax不适用于跨域请求。对我来说，success不适用于代理内部或外部，我已经给出了alert或console.log，但没有进入success函数内部。您正在使用Ext.data.JsonP.request，请告诉我如何使用代理编写。我使用Ext.data.JsonP.request（），因为您的要求是进行客户端分页。为此，示例fiddle首先获取完整的数据集，然后使用内存代理进行分页。如果您想在每次单击“下一步”按钮时从跨域发送部分数据，那么这就可以做到。它使用jsonp代理，工作非常完美，但分页不起作用，因为没有服务器端代码来处理请求中的分页信息。（后端代码发送完整的数据集。）另一个例子。Reference（）JsonP仅适用于GET方法，因此请为您的代码验证这一点。如果您有Post方法，则后端必须正确发送

访问控制允许来源：

标题。参考。如果你只想进行本地寻呼，那么请参考这个你帮我节省了时间