关于extjs:显示所有记录的分页网格-Ext JS

Paging Grid displaying all records - Ext JS

编辑

事实证明,商店不能有重复的ID。当我删除此字段时,将显示"所有记录"-这表示网格不遵守pageSize

我在将所有商店记录显示在网格中时遇到问题。数据正在从JSON请求中正确返回,并且pagesingtoolbar的行为正确。

这是我的商店:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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'
                        }
                    }

});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的简单网格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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,但是只显示了一行:

enter

我用雷电来表明它不起作用是多么令人震惊

有什么想法吗?


要注意的一个非常重要的事情是服务器负责分页而不是ExtJS。服务器不能返回所有行,而只能返回当前页面的行。服务器端代码必须考虑参数pagestartlimit,以使客户端正常工作。

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


在模型的fields数组中将name属性指定为" id"时,可能是这种情况。尝试改变这一点。