Paging Grid displaying all records - Ext JS

Question

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:

enter image description here

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?

Duplicated Id is definetely the reason why not all records are diplayed. Fix this before going further. — Nicolas Boisvert, Mar 18 '14 at 14:53
I'll have to find a workaround because I have hundreds of records with the same IDs but different associated data, which all need to shown at on the grid. — Clay Banks, Mar 18 '14 at 14:56

score 2 · Accepted Answer · answered Mar 18 '14 at 16:39

2

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.

answered Mar 18 '14 at 16:39

Lorenz Meyer

19,166
22
75
121

Good point Lorenz. I do have `start` and `limit` defined, and I see the params do get passed in my console, I just can't figure out why it's not splitting the records – Clay Banks Mar 18 '14 at 16:54
It has to be done in your php script. Does your server side code actively support paging ? – Lorenz Meyer Mar 18 '14 at 19:43
I don't use a php script, my application communicates with a Servlet that pulls data from another application based on a user's search query. I'm not sure if the server side code supports paging, as I did not write it. I assumed ExtJS would take care of the bulk of paging but I suppose I'm incorrect! – Clay Banks Mar 18 '14 at 20:01
1

Yes, this is a shortcoming of ExtJs. I was really stuck with it. I chose to use a BufferedRenderer, as I explained in another answer (http://stackoverflow.com/a/22401745/1951708). This does not allow for paging, but it allows for infinite scrolling, with all features like local filter, local sort, edit and remote update. – Lorenz Meyer Mar 19 '14 at 02:31

score 0 · Answer 2 · answered Dec 02 '15 at 10:00

0

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

answered Dec 02 '15 at 10:00

Pushkar Kathuria

331
2
17

Paging Grid displaying all records - Ext JS

2 Answers2

Linked