View Full Version : Ext.PagingToolbar does not show correct page number

9 Aug 2010, 10:13 AM
I am using Ext.ux.data.PagingJsonStore, Ext.grid.EditorGridPanel and Ext.PagingToolbar to build a page that has a grid, a search button on top and a paging tool bar at the bottom. It seems that there is a bug in Ext.PagingToolbar that sometimes it does not display correct information when you click on next.

Here is the store

containers.jsonStore = new SFExt.PagingJsonStore({
url: '***',
baseParams: {
containerType: workingMemory.containerType
storeId: 'containersStore',
root: 'items',
idProperty: 'containerId',
fields: [

SFExt.PagingJsonStore is defined as

PagingJsonStore: Ext.extend(Ext.ux.data.PagingJsonStore, {
autoDestroy: true,
autoLoad: {
params: {
start: 0,
limit: 25
lastOptions: {
params: {
start: 0,
limit: 25
listeners: {
exception: function (dataProxy, type, action, options, response, args) {
var errorDialog = new Ext.Window({
autoDestory: true,
autoScroll: true,
buttons: [new Ext.Button({
text: 'OK',
handler: function () {
height: Ext.getBody().getHeight() - 100,
width: Ext.getBody().getWidth() - 100,
title: 'Exception Occured in data retrieve',
items: [new SFExt.Panel({
html: response.responseText

Here is the grid

var gridPanel = new SFExt.PagingEditorGridPanel({
store: containers.jsonStore,
colModel: columnModel,
stripeRows: true,
loadMask: true,
title: "Containers",
titleCollapse: false,
id: 'dataGrid',
listeners: {
rowclick: function (grid, rowIndex, event) {
var record = grid.store.getAt(rowIndex);
workingMemory.containerId = record.get("containerId");
workingMemory.container = record.get("sku");
tbar: ['->', new SFExt.SearchButton({
handler: function () {

Here is the definition of Ext.PagingEditorGridPanel

PagingEditorGridPanel: Ext.extend(Ext.grid.EditorGridPanel, {
clicksToEdit: '1',
stripeRows: true,
initComponent: function () {
Ext.applyIf(this, {
bbar: new Ext.PagingToolbar({
store: this.store,
displayInfo: true,
pageSize: 25
SFExt.PagingGridPanel.superclass.initComponent.apply(this, arguments);

The search button would refresh the store with new data. Here is the code

searchHandler: function search() { //searchHandler is used for 'ENTER'
var containerNumber = dialog.findById('containerNumberSearch').getValue();
var statusId = dialog.findById('containerStatusSearch').getValue();
var rollNumber = dialog.findById('rollNumberSearch').getValue();
var shopOrder = dialog.findById('shopOrderSearch').getValue();
var location = dialog.findById('locationSearch').getValue();
//add values to baseParams. This is to ensure next, back
//and refresh buttons will have these parameters
var baseParams = {
containerType: workingMemory.containerType,
containerNumber: containerNumber,
statusId: statusId,
rollNumber: rollNumber,
shopOrder: shopOrder,
location: location
containers.jsonStore.baseParams = baseParams;
containers.jsonStore.lastOptions.params.start = 0;
//Refresh data store for the grid.
//Therefore refresh the grid itself automatically

Sometimes, after a search, if more than one page is returned, if you click on next, the PagingToolbar is messed up. I attached a screenshot to show this. In this example there are 40 rows of data. Each page has 25 rows. After search, row 1 to row 25 are shown. After I click next, it shows the next 15 rows, but the PagingToolbar shows page 1, displaying 1 to 15 of 40. It should be page 2, displaying 26 to 40 of 40.

But this only happens sometimes.

Any ideas what I am doing wrong? It seems there is an internal variable keeping count of the page. And I am not updating this variable right.

Thanks in advance for any suggestions!!!

10 Aug 2010, 1:42 AM
Do NOT put complex types in your prototype!

SFExt.PagingJsonStore needs to set autoLoad, lastOptions and listeners in initComponent and not in the prototype.

ps. You don't need to specify lastOptions if you are loading from a proxy. That is only required when you specify 'data' or use loadData().

10 Aug 2010, 7:36 AM
Thank you for looking into this!

Do you mean something like this?

PagingJsonStore: Ext.extend(Ext.ux.data.PagingJsonStore, {
autoDestroy: true,
initComponent: function(){
Ext.applyIf(this, {

autoLoad: {params: {start: 0, limit: 50}}

SFExt.PagingJsonStore.superclass.initComponent.apply(this, arguments);


There is one problem. The initComponent is never called. I put an alert there to demo it. The alert never pop up. Should it be called when a new SFExt.PagingJsonStore object is created?

It seems initComponent is called for SFExt.PagingGridPanel (extended from Ext.grid.GridPanel).

When I extend SFExt.PagingJsonStore from Ext.data.Store, initComponent is not called either.

If this is not what you meant, please let me know where I need to put initComponent...

Thank you so much!!!!