PDA

View Full Version : ExtJS Paging Toolbar start page



emaint
3 Nov 2010, 12:21 PM
I have an ExtJS GridPanel with a store and a paging toolbar at the bottom. I can manually set the start page through the browser using:

www.someurl.com/page/7 (http://www.someurl.com/page/7)

This will load the data store with page 7 correctly. However, the paging toolbar does not update the page number from the store (it still shows 1). I was under the impression that by changing the page of the store also changes the page in the paging toolbar, but this is not the case. Here is some example code:



var _store = new Ext.data.Store({
id : 'store_id',
remoteSort : true,
autoDestroy : true,
restful : true,
proxy : _proxy,
reader : _reader,
writer : _writer
});

var _pagingToolbar = new Ext.PagingToolbar({
displayInfo : true,
pageSize : 20,
store : _store
});

_I.grid = new Ext.ux.GridPanel({
id : 'the_grid',
title : 'the_title',
store : _store,
bbar : _pagingToolbar
});


_I.options.page = 7; //start store on page 7

_I.grid.render('somediv');
_store.load({params:{start:_I.options.page, limit:20, sort:'id', dir:'ASC'}});

Since the start page is set to 7, the data that loads in the store is correct, however, the page in the paging toolbar reads 2. I have tried manually setting the page with



_pagingToolbar.changePage(20); // should set page to 20
I get the same result, the data store loads up the correct page, however the toolbar text does not change. Is the order wrong? I also tried loading the store before the grid is rendered, to no avail, with same result.

Condor
4 Nov 2010, 12:39 AM
'start' is not the page number; it's the first record number to show, so you should use:

_store.load({params:{start:_I.options.page * 20, limit:20, sort:'id', dir:'ASC'}});

emaint
4 Nov 2010, 6:29 AM
Thank you for your reply Condor. I did not realize that was not the page number so that is another good solution. After digging through the PagingToolbar class I found a handy little method that does not exist in the API. Looking through, the PagingToolbar has a property called inputItem which is an instance of an Ext.form.NumberField. The code to make the manual change to that value using the previously posted code would look something like this:



_pagingToolbar.inputItem.setValue($pageNum+1);


Since the data is already on the correct page, all it takes is to sync the number up with the correct page. The reason you need to add a 1 is because the paging starts at 0 on the client side, but on the server side it starts at 1. Both solutions are equally acceptable to me and I again thank you for your response.