PDA

View Full Version : Grid Paging Issue



bevara.siva
8 Jan 2015, 5:34 AM
Hi,

We are using Ext Js 4.2.2

We are facing the following issues with the paging.
1) Grid displaying all the records in one page irrespective of the page size>

In this case I am returning all the records in the json format.
In the Grid it is showing all the records in one page and the paging tool bar is properly constructed with the proper page numbers. If I click on the "Next" button then it is showing the all same records in the next page.

In the store I set the properties as below.


autoLoad: {start: 0, limit: 1},
pageSize: 1,
model: 'Master.model.SummaryModel',
storeId: 'Store',
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'PagingResult',
totalProperty: '4'
}


As it is displaying all the records, I have changed this to get the number of records based on the request in the beforechange event of the paging tool bar. In the load I am getting only those records equal to the page size. In this case the paging tool bar not properly constructed. It showing only one page number.

Please help!!

Regards,
SivaPrasad.B

scottmartin
10 Jan 2015, 7:55 PM
>>> In this case I am returning all the records in the json format.

You should only return the records you want to display on the page, not the entire set.

{start: 0, limit: 10} sends this to server to limit the number to record to return for page. (ie 10 recs)

bevara.siva
12 Jan 2015, 5:05 AM
Thank you for the response!!!

We are using autoLoad: { start: 0, limit: 10 }.
But the Paging Toolbar is not properly loaded. I have 100 records. The grid is loading 10 records and its not giving me option to move to the next pages.
We are getting the records based on the page index and page size in the "beforechange" event. I am sending these PageSize and PageIndex to the service from the UI.

How to set the total number of records to the Paging Tool Bar, so that it will load the Page numbers and "Next/Prev" buttons. I have tried setting the records in the store as below.



proxy: {
type: 'ajax',
url: 'PositionService.svc/GetPositionOverviewDetailsPaging/0/10',
reader: {
type: 'json',
root: 'GetPositionOverviewDetailsPagingResult',
totalProperty: 100
}
}


Please help!!!

Regards,
SivaPrasad.B

scottmartin
12 Jan 2015, 6:38 AM
Did you adjust your pageSize config to 10 as well?

Here is a quick fiddle:
https://fiddle.sencha.com/#fiddle/e3b

This is for Ext5, and the data is static but it will show how it should work with your setup.

bevara.siva
13 Jan 2015, 5:28 AM
Thank you very much for your response.
I am using the similar code but only change is in the data.

I am getting the data as below from the service:


{"data": [{
"total":"24",
"items": [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}, {
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}]
}]}


You can observe one more root element "data" in that.
This is returned from the WCF service.

One more thing is I am using Ext Js 4.2.0 for my application.
I have created a fiddle with the data format returned from the service.

https://fiddle.sencha.com/#fiddle/g6p

Please assist me in fixing this.

Regards,
SivaPrasad.B

scottmartin
13 Jan 2015, 6:07 AM
The syntax has changed from Ext4/Ext5 a bit. Here is a old php example from a while back that should help.

51495