Extjs4 - Paging not working - Please help !!

[roykrish]

Hi,

I am new to Sencha, and tried to write a sample application using Grid. I followed the example given in 'Getting started guide' and get one simple application up and running using MVC architecture, with one view only which is nothing but a plain Grid. My datastore is a json file.

Now, I want to use Paging in my grid panel. I followed this link http://docs.sencha.com/ext-js/4-0/#!/guide/grid and did whatever is mentioned here under the 'Paging' Section .

[1] I used 'pageSize' and 'totalProperty' in my store.

[2] I modified my json file as mentioned in the example.

[3] I put the dockedItem section in my view.

What is happening is that in my Grid View I am getting the paging toolbar. The toolbar shows all the buttons correctly. The only problem is that every time the grid is loading is all the records. I have total 9 records in my static JSON file, and my pageSize is 4. I want the grid to show first 4 records only at the beginning and when I go to page 2 it should show me from 4 to 8 and so on. But it is always showing up all the 9 records.

Could someone please guide me, that what I am missing here.

Thank You !!

[skirtle]

The page size must be enforced on the server. If your server is ignoring the page size and returning 9 results then that is what you will get in your store.

All paging requests contain 3 request parameters to allow you to implement paging: page, start and limit. There is some redundancy here, you don't need to use all three on the server but you should pick whichever combination makes most sense in your scenario.

[roykrish]

Thanks for replying.

In my case I don't have any server to return data. I have a static JSON file.

My Store Class :-
-----------------------

Ext.define('abc.store.com.fimt.asts.paas.projectListStore', {
extend: 'Ext.data.Store',
model: 'abc.model.com.fimt.asts.paas.projectListModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/projectList.json',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});


My Json class. ( This file is my datastorage)
--------------------------------------------

{
data: [
{name: 'abc', age: '34'},
{name: 'def', age: '45'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'}
]
}

Could you please tell me how could I use 'page' 'start' and 'limit' here.

[skirtle]

Please use [CODE] tags when posting code.

Your problem is that you're trying to do something 'not real'. You can't use paging with a static JSON file. The start, page and limit are being sent as request parameters. If your server ignores them because it is using a static file then you can't use paging.

Depending on your choice of server you may be able to fake it by chopping the static data up into 3 files and then serving up a different file depending on the parameters passed. Most webservers have some sort of support for this.

Your response format is also incorrect. You need to include a total somewhere, like this:


{
total: 9,
data: [
{name: 'abc', age: '34'},
{name: 'def', age: '45'},
{name: 'ghi', age: '38'},
{name: 'ghi', age: '38'}
]
}

Another alternative (though quite a convoluted one) is to load all the data into a PagingMemoryProxy.

I suggest having a read of this page in the docs:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

The bit about passing params to load or autoLoad is misleading, ignore that bit, but the rest is worth a read.

[roykrish]

Thank you for replying. It works for me.