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.

Answer 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.