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：{ 商店：{ 类型：＆＃39;人员＆＃39;， }， xtype：＆＃39; pagingtoolbar＆＃39;， displayInfo：true }，

我在bbar中删除了商店，但它确实有效。谢谢合作。

Answer 2

您使用商店的方式，每当您更改页面时，ExtJS都会发出请求，并将页码参数发送到设置为商店的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以获取完整的工作示例。

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

3 个答案: