ExtJS 4.2 pageSize not working

Question

I have a store in which I have mentioned the pageSize config to be 20 and also in my reader I have mentioned the totalCount config. I make the proxy request to a servlet in Java. The servlet fetches data from a MySQL table and builds a json containing 500 rows, and I set the totalCount config in the json to 500. I call store.loadPage(1) at the end. Despite of all this, my grid is loading all the 500 records on every page in the grid. What am I doing wrong?

Below I have given a few snapshots of my code

var store = Ext.create('Ext.data.Store', {
    model: 'AM.model.User',
    pageSize: 20,
    proxy: {
        type: 'ajax',
        url: '/pwbench/FcmServlet',
        reader: {
            type: 'json',
            totalProperty: 'total',
            root: 'start'
        },
        writer: {
            type: 'json'
        }
    },
});

The json returned from the servlet is like this ["total":"500","start":[{....}]]

I checked the grid paging example on http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/paging.html and I can't understand why my paging is not working. Please help.

score 1 · Accepted Answer · answered May 28 '13 at 04:32

1

If your servlet is fetching 500 rows from the DB and builds 500 rows into the JSON response, then the reason you're getting all the records is precisely because you are sending back all 500 records.

If you want paging, you'll have to implement some logic for it into either your SQL query (best) or some post-query process to limit the number of rows to match the limit parameter that's passed through in the request (do-able, but not advised).

For MySQL, this is typically accomplished via limit SOMEMAXNUMBER offset SOMEPAGENUMBER.

So if your page size is 20, your query might look like:

select *
from   sometable
order by column 1 ASC
limit 20 offset 1

This would return the first 20 rows, starting at the first row. Then, when the next page was requested, the offset would change appropriately, and so on.

answered May 28 '13 at 04:32

existdissolve

3,104
1
16
12

Thanks. I figured that the totalCount needs to reflect the total number of records in the grid but I need to fetch the pageSize number of records from the table at a time on the server side. – Arnav Sengupta May 28 '13 at 05:30
@existdissolve, might you have any post-query process solution for a JSON response to limit the data? – Clay Banks Mar 19 '14 at 17:32
The way you would do it (which I highly suggest you DON'T) would be to query all of your records, and then loop over them...starting from the "start" row and ending at whatever "start" + "pageSize" is. This is a really bad approach, though, because it grows the processing time relative to the number of total records in the db...imagine if you had several million records :) – existdissolve Mar 19 '14 at 18:47

Aminesrine · Answer 2 · 2013-05-28T07:28:35.707

0

The requests made to the server have three additional parameters when a paging toolbar is defined: page, start and limit.
Try to add autoLoad : {start: 0, limit: 20} in your store. And to update your java code according to this parameters.
*Don't forget to add store: your_Store in your PagingToolbar

edited May 28 '13 at 07:28

answered May 27 '13 at 10:16

Aminesrine

2,082
6
35
64

1

You do not need to add pageSize to the paging toolbar (it's not even a config for Ext.toolbar.Paging). The Paging toolbar is driven from the store's config. – existdissolve May 28 '13 at 04:25

ExtJS 4.2 pageSize not working

2 Answers2