显示所有记录的分页网格 - Ext JS

Question

编辑

事实证明，商店不能有重复的 ID。当我删除此字段时，所有记录显示 - 这意味着网格不尊重pageSize

我在让我的所有商店记录显示在我的网格中时遇到问题。数据从 JSON 请求中正确返回，并且分页工具栏的行为正确。

这是我的商店：

var store = Ext.create('Ext.data.Store', {
                    storeId     : 'resultsetstore',
                    autoLoad    : false,
                    model       : model,
                    pageSize    : itemsPerPage, // 3
                    proxy: {
                        type    : 'ajaxwithpayload', //custom ajax proxy to read 'jsonData'
                        url     : 'MCApp',
                        jsonData: searchquery,
                        reader: {
                            type    : 'json',
                            root    : 'elements'
                        } 
                    }

});

我在这里加载store，返回所有正确的结果：

store.load({ 
                params: { start: 0, limit: itemsPerPage },
                callback : function(records, operation, success) {
                    if(success) {
                        mainresponse = operation.response.responseText;
                        if( mainresponse.length == 0 ){
                            alert('No results returned');
                            return;
                        }
                        var jsonResponse = Ext.JSON.decode(mainresponse);
                    }
                    else {
                        alert('Search Failed: Could not reach the server');
                    }

最后，一个带有pagingtoolbar的简单网格：

var grid = Ext.create('Ext.grid.Panel', {
        title: 'Test Data',
        store: store,
        columns: [{
            text: 'Technical Name',
            dataIndex: 'tech'
        }, {
            text: 'ID',
            dataIndex: 'element.id'
        }, {
            text: 'Name',
            dataIndex: 'name',
            mapping: 'element.name'
        }, {
            text: 'View',
            dataIndex: 'view'
        }, {
            text: 'Description',
            dataIndex: 'description'
        }],
       dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            pageSize: itemsPerPage,
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()
    }); 

这里的问题是，并非我的所有结果都加载到网格中。似乎当遇到重复的 ID 时，它会缩短结果。这可能不是问题，只是我的猜测

在我的日志中，我看到了我需要返回的所有数据。在下图中，我应该有 3 行 具有相同的Element ID 001，但是只显示了一个：

要注意的另一件事是，当我单击分页工具栏上的下一步按钮时，结果不会改变，并且它在我的控制台上也显示为 POST。我不确定它是否应该这样做或者是 GET？

我用闪电来展示震惊这不起作用

有什么想法吗？

Answer 1

需要注意的一个非常重要的事情是 服务器 负责分页而不是 ExtJS。服务器不得返回所有行，而只能返回当前页面的行。您的服务器端代码必须考虑参数page、start 和limit 才能让客户端工作。

我认为，除了重复的 id 之外，这是您遇到问题的主要原因。尤其是您在第一页和第二页看到相同数据的原因：
ExtJs 向服务器请求第 1 页的数据并获取所有行。稍后，ExtJs 向服务器请求第 2 页的数据并再次获取相同的行。这行不通。

Answer 2

当您在模型的字段数组中将 name 属性指定为“id”时，可能会出现这种情况。尝试改变这一点。