显示所有记录的分页网格 - Ext JS [英] Paging Grid displaying all records - Ext JS

问题描述

编辑

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

It turns out that a store cannot have duplicate IDs. When i remove this field, All records display - which means the grid is not respecting the pageSize

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

I'm having an issue getting all my store records to display in my grid. The data is returning appropriately from a JSON request, and the pagingtoolbar behaves correctly.

这是我的商店:

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'
                        } 
                    }

});

我在这里加载商店，返回所有正确的结果:

I load the store here, and all the correct results are returned:

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 的简单网格:

And lastly, a simple grid with 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 时，它会缩短结果.这可能不是问题，只是我的猜测

The problem here is that not all of my results load into the grid. It seems that when a duplicate ID is encountered, it cuts the results short. That may not be the problem, just my guess

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

In my logs I see all the data I need returned. In the picture below, I should have 3 rows with the same Element ID 001, however only one is displayed:

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

Another thing to note is that when I click the Next Button on my pagingtoolbar, the results do not change, and it also reads as a POST on my console. I'm not sure if it's supposed to do that or be a GET?

我用闪电来说明令人震惊这是如何行不通的

I used lightning bolts to show how shocking it is that this isn't working

有什么想法吗?

推荐答案

需要注意的很重要的一点是 服务器 负责分页而不是 ExtJS.服务器不得返回所有行，而只能返回当前页面的行.您的服务器端代码必须考虑参数 page、start 和 limit 以使客户端工作.

A very important thing to note is that the server is responsible for paging not ExtJS. The server must not return all rows, but only the rows of the current page. You server side code must take in account the parameters page, start and limit for getting the client side to work.

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

I think that, beside the duplicated ids, is the main reason for your problems. It is especially the reason, why you see the same data on page one and on page two:
ExtJs asks the server for the data of page 1 and gets all rows. Later, ExtJs asks the server for the data of page 2 and gets again the same rows. This cannot work.

这篇关于显示所有记录的分页网格 - Ext JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！