Paging Grid displaying all records - Ext JS

EDIT

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

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.

Here's my store:

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

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

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

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:

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

Any ideas?

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.

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.

This might be the case when you are giving name property as "id" in the fields array of your Model. try to change that.

来源：https://stackoverflow.com/questions/22481633/paging-grid-displaying-all-records-ext-js

标签

extjs