PDA

View Full Version : pagination not working



roshniblr
22 Sep 2011, 4:14 AM
Hi I have the following snippet of code for grid. My data is coming in the same page but the top bar and bottom bar arrows are working fine. Pagination not working . All the data coming in the same page with a scroll.


Ext.define('MyModel', { extend: 'Ext.data.Model',
fields: ['num', 'dateTime', 'add']
});
MyStore = Ext.create('Ext.data.Store', {
model: 'MyModel',
pageSize: 10,
proxy: {
type: 'ajax', url: '/myapp/application.do?action=loadData&' ,
reader: { type: 'json', root: 'rows', totalProperty: 'totalCount' }
},
autoLoad: true });
MyStore.load({
params:{ start:0, limit: 10 }
});
var MyNodes = Ext.create('Ext.grid.Panel', {
width:800, height:250,
autoScroll: false,
renderTo: 'defaultViewPort',
store: MyStore,
columns: [{ text: 'S No.', dataIndex: 'num' },{ text: 'Date', dataIndex: 'dateTime' },{ text: 'Address', dataIndex: 'add' }],
bbar: Ext.create('Ext.PagingToolbar', {
store: MyStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
tbar: Ext.create('Ext.PagingToolbar', {
store: MyStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});

roshniblr
22 Sep 2011, 9:31 PM
In the tool bars both in top and bottom the number of records etc are showing properly as shown below.I have currently 13 records. When the page is loaded i expect only 10 records will be displayed and on clicking of next the other 3 records will be displayed but in this case all the 13 records are getting displayed on the same page. I have the snippet of code in the above post.

"Page 1of 2 Displaying topics 1 - 10 of 13"

twaindev
25 Sep 2011, 11:32 AM
Looks like the server is not obeying the limit.

When the client requests 10 records, then the server should only send 10 records and report the total number of records in the totalCount property.

HTH

roshniblr
25 Sep 2011, 7:42 PM
According to the example
http://www.sencha.com/learn/legacy/Tutorial:Basics_of_Paging_With_the_Grid_Component
what I understand is in the json object, totalCount should be the total number of records and that we map with totalProperty attribute.


reader: {
root: 'rows',
successProperty: 'success',
totalProperty: 'totalCount',

},

I think the below piece of code should handle display of number of records in the page.


MyStore.load({
params:{
start:0,
limit: 10
}

I also tried hardcoding totalProperty: 10, but still it shows all the records on the same page.
How do I make this work.?

twaindev
25 Sep 2011, 11:53 PM
MyStore.load({
params:{
start:0,
limit: 10
}

This specifies how many records the client requests, but did you check how many records the server returns? Does it indeed return only 10 records or does it return all the records?

skirtle
26 Sep 2011, 3:53 AM
To add to what twaindev has already said...

Store paging is not enforced client-side in the JavaScript. What happens is the store calls out to the proxy requesting the first page (10 results). The proxy (probably an Ajax proxy) then makes a request to the server requesting these 10 results. From a client-side perspective, that's it. It then relies upon the server to return what was requested. If the server returns 13 results instead of 10 then the store will end up containing 13 results.

In your response you'd need something like this:


{
"totalCount": 13,
"success": true,
"rows": [
... // 10 results, it appears you're currently returning 13 by mistake
]
}

roshniblr
26 Sep 2011, 7:18 PM
My server result was not taking start and limit into consideration. It worked :). Thanks.

twaindev
27 Sep 2011, 1:08 AM
Great!

Please select the answer that helped you so this topic is closed.