View Full Version : PagingToolbar Issue - page not rendering after setBaseParam is updated in store.

14 Jul 2009, 11:09 PM
Ext JS is a wonderful kit. :D However, in the last few days I have been trying to figure out a problem that I couldn't find a solution for in the the forums. I am using the Ext.PagingToolbar in a store, which is connected to a EditorGridPanel.

I also have a separate FormPanel with a button handler that updates the store by invoking setBaseParam to assign fields and values. Invoking store.load() POSTs the updated params and proper data is returned from server. PagingToolbar is also updated with proper records and pages.

Now here is where the problem occurs. When hitting any of the page buttons (next, prev, first, last), the store POSTs the same params above along with the proper start and limit parameters. The server returns the proper data, however, the PageToolbar and grid is not updated. The current page is not updated, the grid is not updated, and the displayMsg is not updated.

Can someone tell me what I am doing wrong? My sample code is below. I suspect my problem lies somewhere within the form button handler...?

var storeBaseParams = { keywords: ''};

var searchForm = new Ext.form.FormPanel({
id: 'itemsSearchForm',
frame: true,
layout: 'form',
autoScroll: true,
autoHeight: true,
title: 'Search Items',
defaultType: 'checkbox',
items: [{
fieldLabel: 'Keywords',
name: 'keywords',
xtype: 'textfield',
bbar: [
text: 'Search Items',
handler: function() {
//add params to store
var fv = Ext.getCmp('itemsSearchForm').getForm().getValues();
//for simplicity, I've only included one of the many fields from the form...

var store = new Ext.data.JsonStore({
fields: ['id','item_number'],
url: '/test.php',
baseParams: storeBaseParams,
storeID: 'store',
autoLoad: true,
root: 'items',
totalProperty: 'itemCount',
pruneModifiedRecords: true,
id: 'item_id',
fields: [
{name: 'item_id', type: 'string'},
{name: 'item_number', type: 'string'},

var pageBar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display"

var cm = new Ext.grid.ColumnModel([
id: 'item_id',
hidden: true,
xtype: 'numbercolumn',
format: '0',
width: 60,
align: 'center',
header: 'ID',
sortable: false,
dataIndex: 'item_id',
id: 'item_number',
width: 220,
header: 'Item Number',
dataIndex: 'item_number',
sortable: true,
editor: { xtype: 'textfield', allowBlank: false}

var itemsGrid = new Ext.grid.EditorGridPanel({
title: 'Items',
store: store,
cm: cm,
tbar: [ pageBar ]

Ext.onReady(function() {
});Debugging with firebug shows the POST vars when LAST page is clicked:

keywords book
limit 25
start 1175
Data returned is:

{ 'itemCount': '1199', 'items': [ { 'item_id': '3201', 'item_number': '1823-28'.....At this point, I would expect the grid and paging toolbar to refresh, but it just sits there.

15 Jul 2009, 4:55 AM
add listeners to store for load and exception events and see which one fires while you are paging.

15 Jul 2009, 11:15 AM
Well it turns out the json data being return had the carriage return and line feed character codes that were not encoded, which was causing problems with the store load.