View Full Version : Show page no. in pager in ComboBox?

8 Dec 2009, 1:32 PM
I have been reading through a lot of threads but can not find out why I see the pager but cannot go to next page. I know there are more pages but it says "page 1 of 1". Something must be wrong with my JSON. I would be glad for any input:

Btw. Do I need both name and mapping for fields if I donīt want to change the names?

My combobox:
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'GET',
queryParam: selected_text,
url: 'ajax/get_data.php?kom=' + selected_text
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'locid'
}, [
{name: 'locid', mapping: 'locid'},
{name: 'gardsnavn', mapping: 'gardsnavn'},
{name: 'navn', mapping: 'navn'},
{name: 'x', mapping: 'x'},
{name: 'y', mapping: 'y'},
{name: 'bilde', mapping: 'bilde'},
{name: 'komm', mapping: 'komm'}
] )
var freeTextSearch = new Ext.form.ComboBox({
store: ds,
minChars : 3,//for input query param
typeAhead: false,
loadingText: 'Søker...',
width: 176,
tpl: resultTpl,
itemSelector: 'div.search-item',
onSelect: function(record){ // override default onSelect to do redirect
var x =String.format('{0}'); var y =String.format('{1}');
map.setCenter(new OpenLayers.LonLat(record.data.x,record.data.y), 10);
record.data.topicId, record.id);

Params sent: _dc1260307568731kom
remote file is PHP and I accept - limit, - query, -start, so that the SQL would do i.ex "select * from ...... limit 20,10"

Result JSON:
{"totalCount":10,"data":[{"locid":"68881","gardsnavn":"Skj\u00f8rten s\u00f8ndre","navn":"Vammaskogen","x":"283775.79879409 ","y":" 6607411.70196969","komm":"Askim","bilde":""},{"locid":"12955","gardsnavn":"Veum s\u00f8ndre","navn":"Kriken\u00e5sen Veumskogen","x":"268730.822409833 ","y":" 6574910.30910369","komm":"Fredrikstad","bilde":""},{"locid":"21141","gardsnavn":"Veum s\u00f8ndre","navn":"Veumskogen Krikn\u00e5sen","x":"268998.051542202 ","y":" 6574888.19540664","komm":"Fredrikstad","bilde":""},{"locid":"29245","gardsnavn":"Bilet (i matr \u00c5rum nordre)","navn":"Bilettskogen\/parken","x":"277920.447252841 ","y":" 6575290.19348531","komm":"Fredrikstad","bilde":""},{"locid":"30052","gardsnavn":"Kjenne \u00f8stre","navn":"Kjenneskogen","x":"263225.334212021 ","y":" 6573916.4441686","komm":"Fredrikstad","bilde":""},{"locid":"39255","gardsnavn":"Bilet (i matr \u00c5rum nordre)","navn":"Bilettskogen, parken.","x":"277926.321522444 ","y":" 6575455.40512585","komm":"Fredrikstad","bilde":""},{"locid":"39293","gardsnavn":"Borge store","navn":"Presteg\u00e5rdsskogen","x":"273691.372983406 ","y":" 6572162.15111646","komm":"Fredrikstad","bilde":""},{"locid":"49250","gardsnavn":"Kj\u00f8lberg s\u00f8ndre","navn":"Kj\u00f8lbergskogen-Skauen","x":"272631.222191223 ","y":" 6571924.32173689","komm":"Fredrikstad","bilde":""},{"locid":"51198","gardsnavn":"Veum s\u00f8ndre","navn":"Veumskogen Kriken\u00e5sen","x":"268708.613467424 ","y":" 6574508.47545053","komm":"Fredrikstad","bilde":""},{"locid":"69880","gardsnavn":"Veum s\u00f8ndre","navn":"Veumskogen Krikn\u00e5sen","x":"268714.845248844 ","y":" 6574822.34433518","komm":"Fredrikstad","bilde":""}]}
Sorry if this is much text. Is there something missing from the JSON?


8 Dec 2009, 7:47 PM
Your totalCount return should be the total count of your query. The data returned is the paging data.

From your dump, it looks like you returned 10 items and your totalCount is 10, so the result is 1 of 1.

Your JSON should return:

{"totalCount":428, data: [{...},...,{...}]}

8 Dec 2009, 10:28 PM
Hi and thanks for helping out!
I get totalcount:10 because I send the parameters
- limit
- query
- start
so my sql looks like i.ex.
SELECT * FROM db WHERE searchfield LIKE '%$query%' LIMIT $start,$limit

so the request is limit=10 and therefore I only get 10 but there are at least 50. I do not specify limit anywhere. I only have pageSize:20. So where does the limit come from?

UPDATE: I removed the LIMIT part of my SQL and paging works fine. So now I get it. ExtJS takes care of the start and end position and the skiprecords. Cool!


9 Dec 2009, 5:06 AM
Hello again,
I thought this was ok but what happens is that the pager is showing: "page 1 of 5" and click on "next" and it shows "page 2 of 4", "page 3 of 3". This is not correct at least. I can see that the value for "start" is sent. Iex. "start=40" on second click.

Is there something wrong with my SQL (postgresql) ? It now looks like
SELECT * FROM db WHERE searchfield LIKE '%$query%' OFFSET $start

When I click on the pager next page, params:
limit 20
query skogen
start 20

I get this response:
{"totalCount":54,"data":[{ ...

Then next click again
limit 20
query skogen
start 20
gives me this:
{"totalCount":34,"data":[{ ...

So it seems the sql result changes when I click the pager. How can I avoid this?


9 Dec 2009, 5:44 AM
Always use the correct value in totalCount.

9 Dec 2009, 7:10 AM
You are going to get different returns because you specified a where clause.


But in this case for both returns, it is awkward that you are getting a different total count. But I think I know where your code is wrong. Because you are specifying a pageCount of 20 (which by the way sets the "limit" value), you are selecting next, and the totalCount goes down by 20. That means that your backend code only counts the total amount of records from where the cursor of your query is pointing to.

So either query the count separately without setting the limit, then set the limit return the data. I think there is a way in PHP to get the total recordcount. Check out this tutorial (http://www.extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component).