View Full Version : PagingToolbar Not Loading JSON data Beyond First Page

22 May 2010, 8:00 PM
Hey saki, animal and everyone else!

First off, extjs is fantastic and your support forum participants are very helpful. Nonetheless I am having trouble with PagingToolbar and need your help.

I am using PagingToolbar in a GridPanel. The first page of data loads fine. The totalProperty loads fine. However, I am unable to get the 'Next' button to load the next set of rows.

I'm using ext-3.2.1 (which I just upgraded from 3.1.0 in hopes that it would correct this problem). The server-side classic asp functions correctly when given queried separately.

I have confirmed that the parameter 'start' in doLoad is correct (i.e. next button sends 25 and refresh button sends 0).

The problem appears to be that my doLoad function does not appear to return anything other than the first page of records.

Perhaps the jsondata store or the reader is not updating with the new information or it is somehow being sent incorrect new information.

Please help me to see what I have done incorrectly. Thanks in advance!

P.S. You will also note both start/limit and begin/maxrows being sent as a further precaution since I read there was some confusion in ext about this.

Below is my code:

People.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
id: 'people',
totalProperty: 'TotalCount',
root: 'Records',
url: '../queries/PPL_list_get.asp',
fields: ['active', 'lastname', 'firstname', 'loginid', 'email', 'location', 'department', 'peopletype', 'security', 'proctor', 'jobtitle', 'rownum']
columns: [
{id: 'rownumber', width: 2, dataIndex: 'rownum'},
{id: 'active', header: 'Status', width: 5, dataIndex: 'active'},
{id: 'lastname', header: 'Last Name', width: 9, dataIndex: 'lastname'},
{id: 'firstname', header: 'First Name', width: 9, dataIndex: 'firstname'},
{id: 'loginid', header: 'Login ID', width: 7, dataIndex: 'loginid'},
{id: 'email', header: 'E-Mail', width: 15, dataIndex: 'email'},
{id: 'location', header: 'Location', width: 9, dataIndex: 'location'},
{id: 'department', header: 'Department', width: 9, dataIndex: 'department'},
{id: 'peopletype', header: 'People Type', width: 10, dataIndex: 'peopletype'},
{id: 'security', header: 'Permissions', width: 5, dataIndex: 'security'},
{id: 'jobtitle', header: 'JobTitle', width: 15, dataIndex: 'jobtitle'},
{id: 'notify', width: 5, dataIndex: 'notify'}
viewConfig: {forceFit:true},
stripeRows: true,
trackMouseOver: false
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.bbar = new Ext.PagingToolbar({
store: this.store,
displayInfo: true,
pageSize: pagesize
// call parent
People.Grid.superclass.initComponent.apply(this, arguments);
//add listeners after parent called
'rowclick' : {
fn: this.onRowClick,
scope: this
}) // eo listeners
}, // eo function initComponent

onRender:function() {
document.CoId = coid;
document.PgSz = pagesize;
var parameters = params_get(0);
// call parent
People.Grid.superclass.onRender.apply(this, arguments);
// load the store
} // eo function onRender
}); // eo People.Grid
doLoad : function(start){
if(this.store.getTotalCount()>0 && (this.pagingEvent==true)){
function params_get ( st, sz ) {
// get filters for parameters
function dget (val) {
return document.getElementById("FA"+val)?document.getElementById("FA"+val).value:'';
return {
start : st,
limit : document.PgSz,
begin : st,
maxrows : document.PgSz,
ComID : document.CoId,
fltSta : f?dget(0):'', // status filter
fltNam : f?dget(1):'', // name filter
fltLog : f?dget(2):'', // loginid filter
fltEma : f?dget(3):'', // email filter
fltLoc : f?dget(4):'', // location filter
fltDep : f?dget(5):'', // department filter
fltPpl : f?dget(6):'', // peopletype filter
ftlSec : f?dget(7):'', // security filter
fltJob : f?dget(8):'' // jobtitle filter

26 May 2010, 3:10 PM

Did I post this improperly?

Can anyone assist?



27 May 2010, 3:41 PM
Thank you jgarcia (http://www.extjs.com/forum/member.php?172-jgarcia-tdg-i.com)!

Fiddler (http://www.fiddler2.com/fiddler2/) did the trick.

Everything was okay on the client-side with extjs. The problem was the subsequent page calls were not returning correctly and fiddler helped me spot the problem right away.

You are awesome! Thanks!