View Full Version : PagingToolBar problem

24 Jan 2008, 10:27 PM
I have a PagingToolBar attached to ExtPanel to browse through messages that is loaded from the backend.
The data is retrieved in json and displayed using dataview and a template.
After the data fetch on load however, the paging tool bar shows page 1 of 1, and the page navigation buttons are not enabled.
Can anybody please guide on how to fix this?
Here are the code snippets
-- store --
var store = new Ext.data.Store(
{proxy:new Ext.data.HttpProxy(
reader:new Ext.data.JsonReader(
{root:'posts',id:'mid', totalProperty:'totalMessages',
fields:['uid', 'text', 'uname', 'avtaar','src','ago']}),
-- ext panel and associated dataview ---
var dv = new Ext.DataView({id:'idCRMsgData',store:store,tpl: mTpl,autoHeight:true,
multiSelect: false,emptyText: 'Loading, please wait....'});
var cRMsgPanel = new Ext.Panel({width:526,autoHeight:true,id:"idCRPanel",headerAsText:true,
title:'Live messages from c network',shadow:'sides',trackMouseOver:false,
tools:[{id:'left',handler:olderM,qtip:'Browse older messages'},{id:'refresh',handler:refreshF,qtip:'Click here to view latest messages'},{id:'right',handler:newerM,qtip:'Browse newer messages'}],
tbar: new Ext.PagingToolbar({
pageSize: 12,
store: store,
displayInfo: true,
displayMsg: 'Displaying messages {0} - {1} of {2}',
emptyMsg: "No messages to display"


25 Jan 2008, 3:28 AM
I don't see code to load the store for the first time.

This should be:

store.load({params: {start: 0, limit: 12}});

25 Jan 2008, 4:28 AM
Yes, I have that line in my file.
The data is also being loaded, and strangely, I can even browse through the pages if I manually type in the page number "Page [X] of 1" area.
It does refresh the panel with the correct records from the backend.
Anything else I might be missing. Somehow I suspect the totalProperty field is not being read in correctly.


25 Jan 2008, 4:30 AM
What does your data look like?

It should be something like:

totalMessages: 1,
posts: [{
'uid': 123,
'text: 'abc',
'uname': 'def',
'avtaar': 'ghi',
'src': 'jkl',
'ago': 'mno'

25 Jan 2008, 4:35 AM
This is what the server returns to the query. Here I have fired the query with a limit=2

{"totalMessages":"12548","posts":[{"mid":"13164","uid":"531","text":"@mahatma,a bone deep truth Sir. ","uname":"dgsatwal","avtaar":"AVT0001.PNG","src":"WEB","ago":" an hour ago"},{"mid":"13163","uid":"62","text":"bird flu slowly coming to south, now alert is in Kerala","uname":"kingfisher","avtaar":"U000062_7813.jpg","src":"IM","ago":" 4 hours ago"}]}


25 Jan 2008, 4:36 AM
That should be:

{"totalMessages":12548,"posts":[{"mid":"13164","uid":"531","text":"@mahatma,a bone deep truth Sir. ","uname":"dgsatwal","avtaar":"AVT0001.PNG","src": "WEB","ago":" an hour ago"},{"mid":"13163","uid":"62","text":"bird flu slowly coming to south, now alert is in Kerala","uname":"kingfisher","avtaar":"U000062_781 3.jpg","src":"IM","ago":" 4 hours ago"}]}

25 Jan 2008, 4:54 AM
I fixed the totalProperty value from the server side to return
{totalMessages:12548,"posts":[{"mid":"13164","uid":"531","text":"@mahatma,a bone deep truth Sir. ","uname":"dgsatwal","avtaar":"AVT0001.PNG","src":"WEB","ago":" an hour ago"},{"mid":"13163","uid":"62","text":"bird flu slowly coming to south, now alert is in Kerala","uname":"kingfisher","avtaar":"U000062_7813.jpg","src":"IM","ago":" 4 hours ago"}]}

But the same problem persists, the navigation buttons are not enabled, and it still shows Page [1] of 1. And if I type in a page number and submit, it does refresh the panel with the correct records, but the refresh icon continues to be rolling.


25 Jan 2008, 7:10 AM
i have exactly the same problem: as log as i dont use the remote url proxy, but instead the HttpProxy the parameters are not passed to my serveside script.

25 Jan 2008, 4:33 PM
I've tried to make a paging grid but I cannot do it. I have looked the example that comes with the ext2.0 library but it doesn't work
When I do a paging grid it looks like that work(as it shows me the limited 30 rows only) but when I go to the next page the paging tool bar says "page 2 of 2" but it shows the same 30 records(not the next 30)!! if I go to previos page it shows "page 1 of 2" but shows still the same records (the grid always shows 30 records, 30 is the limit Which I have set in serverside coding).
I am using JSON reader.I have checked the 'totalProperty' also.It is correct and I am getting total count from the JSON object.Also set the params on ds.load.
I do not understand how everytime start parameter is getting change with the click on the next button.IN the sample there is no code for this.Everytime how the request is passing to the server with change 'start' value.
If someone can help me or show me another example of source code using paging grid and a data store that use an url to retirve data with a JSONreader I will be very pleased.
Thank you!!

26 Jan 2008, 9:27 PM
The start parameter is calculated each time - (page size * page number)...
Your server side code must handle this start parameter as the offset to your database query.


27 Jan 2008, 12:53 PM
thanks for the response....
please tell me ...do we need to do anything to set start parameter as per (page size * page number)...or Ext handles it in background....or do I need to put some logic in my server side code to do this calculation...currently my backend code is using the supplied 'start' and 'limit' params to construct the sql query but problem is ...everytime it takes the same start parameter, it does not change.Ideally it should always change the start parameter value(based on the calculation logic you have provided).
I am not sure where I am missing the concept.Do I have to do anything in my server side code also for the start parameter(which I get from my ext driven web page).Currently at my server side code I am just taking the supplied 'start' and 'limit' values and passing it in my sql query.
Please suggest!


28 Jan 2008, 7:32 AM
Similar paging question ... with paging what if I load all of the data into my .js? Is this type of paging possible?

Code here: http://extjs.com/forum/showthread.php?t=23717

28 Jan 2008, 8:51 AM
I am not passing all the data at a time, I am sending only 30 data from the server to my web page.
My question is how do we pass 'start' and 'limit' values from our web page to the serverside code.As everytime once we click on the next button the 'start' parameter should be reset to 30 or the next values.

I thought
myds.load({params:{start:1, limit:30}});
will pass the appropriate start, limit values to the server side code.But this is not happening.Everytime my server side code get 1 as start value and shows the same 30 data everytime.

Any suggestion??? what I am doing wrong? Help needed!!!!

28 Jan 2008, 11:36 PM
1. Record numbering is zero-based. Use:

myds.load({params:{start:0, limit:30}});

2. Did you also set pageSize:30?

3. Did you specify a totalProperty and is your server returning it?

29 Jan 2008, 6:29 AM
thnx for the response...
1.myds.load({params:{start:0, limit:30}});
I tried with this option also but no change.
2. Did you also set pageSize:30?
Yes, I did so.
3. Did you specify a totalProperty and is your server returning it?
Yes I specified totalProperty I and getting the correct result from the server.

This is the reader,store, grid and pagiing toolbar code I am using(I hope this way I can communicate my problem correctly):
var myreader = new Ext.data.JsonReader({
root: 'Records',
id: 'DealId',
totalProperty :'TotalRecords'
}, dataRecord);
myds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(jsonObj),
reader: myreader
mygrid = new Ext.grid.GridPanel({
store : myds,
cm: mycm,
loadMask: true,
renderTo : 'mygrid',
viewConfig: {
bbar: new Ext.PagingToolbar({
pageSize: 30,
store: myds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
'-', {
pressed: true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
myds.load({params:{start:0, limit:30}});

29 Jan 2008, 6:42 AM
You can't do paging with a MemoryProxy. You need a HttpProxy and a server that properly handles start and limit parameters.

1 Feb 2008, 8:07 AM
Hi Condor,

As per your suggestion I am trying to convert MemoryProxy to HttpProxy.

Could you please provide any link to any sample, so that I can take the reference for this conversion.
I am trying since yesterday but it's not very straight forward.

Any suggestion would be appreciated!


1 Feb 2008, 8:18 AM
Your server needs to return the correct records depending on the following parameters:

start: The recordnumber of the first record to return.
limit: The number of records to return.

If you also set remoteSort:true:

sort: The name of the field to sort on.
dir: The sort direction ('ASC' or 'DESC')

ps. This is what I would recommend to reduce network bandwidth usage, but if that is not a problem you could also use Ext.data.PagingMemoryProxy (in examples/locale/PagingMemoryProxy.js).

1 Feb 2008, 8:29 AM
Thanks Condor for the quick response,

I would also like to try PagingMemoryProxy option.
I will go through the option and let you know once will get any result.I hope with PagingMemoryProxy I willl not require to change much of my existing code.


1 Feb 2008, 10:02 AM
I tried with PagingMemoryProxy, initially it loaded perfectly with the 10 rows but once I click on the next button ..it shows blank grid.
I checked with the Debugger tool, first time it sends to server 'start' and 'limit' but once I click on next button..no parameters values pass to the server.Total Blank.

I have already set the 'start' and 'limit' on the server side code for 30 rows.

I have little doubt, Do I need to set anything in the server side code?? or paging will be completely handled by PagingMemoryProxy at the client side only ?

Please confirm because I have already made the changes in the server side code and on case we do not need it for PagingMemoryProxy then I have to remove it to check it correctly.

Please help!

1 Feb 2008, 11:06 AM
Hi there!

With PagingMemoryProxy option I have implemented it and it is working fine.
Just I need to be sure about the performance to load the data first time.

Thanks for the assist!

7 Feb 2008, 9:08 AM
What you suggest to use if i load all data from the server and then want to perform paging on client using DataView and DataStore ?

8 Feb 2008, 6:45 AM
If you want to load all data from the server and want to do paging at client side then I don't think there is anything better than PagingMemoryProxy.But always remember that there may be performance issue while loading the data first time.For that you can use loading image utility.

12 Feb 2008, 6:46 AM
Hi Manishs,
Do you mind to share your working code?
Thanks a lot.

12 Feb 2008, 7:51 AM
Hi leewu,

On page number 2 you can find reference, just in place of 'MemoryProxy' use 'PagingMemoryProxy' and include PagingMemoryProxy.js in your html file.

16 Feb 2009, 12:46 AM
Hi ,
I am using paging toolbar for Data View.

var pageStore = new Ext.data.Store({
url: 'test.do?fileId='+fileId,

reader: pagesReader,
listeners: {
load: function(){
//var pageNo = Ext.DomQuery.selectValue('PageNumber', this.reader.xmlData);
//setPageNumber(Ext.getCmp(test-window').getBottomToolbar(), pageNo);

bbar: new Ext.PagingToolbar({
store: pageStore,
displayInfo: true,
paramNames:{start: 'pageNumber', limit: 'limit'},
displayMsg: 'Displaying page {1} of {2}',
emptyMsg: "No pages to display"

I am getting PageNumber from xml returned when store loads.
I want to set page number from that.
But when i passes

params:{pageNumber: 1}

I get data for page number 1.
But the textfield between Next-Prev it shows as it is page 2 and increaments later for next butto click.
So there is always one page diff.

Can anyone tell me how can i set page number from returned xml data.

thanx in adv.......

16 Feb 2009, 4:01 AM
The 'start' parameter (which you renamed to pageNumber) is number of the first record to return, not the number of the page to return.

I would just leave the start and limit parameters (remove the paramNames config option) and in the beforeload event add the pageNumber parameter (calculated from start and limit).

16 Feb 2009, 4:29 AM
Thanks for reply condor,

I have managed it with formula in FAQ.

pageNumber = options.params.start / options.params.limit + 1;

Thanks again.

16 Feb 2009, 5:05 AM
I was suggesting something like:

beforeload: function(store, options){
options.params.pageNumber = Math.floor(options.params.start / options.params.startlimit) + 1;