View Full Version : Small Paging Problem

5 Mar 2008, 4:21 PM
I have been having trouble with a paging grid for a few days now, as far as I can tell there is nothing wrong with it however I cannot get it to page, the first 25 rows load but when I click the next page button no new data is loaded.

I am sure I must be missing something very simple but it has me stumped.


Ext.onReady(function() {

var grid = new Ext.grid.GridPanel({
ds: ds,
cm: new Ext.grid.ColumnModel([
{id:'id', dataIndex:'gid', header:'gid', width: 20, sortable: true},
{dataIndex:'name', header:'Name', width: 150, sortable: true},
{dataIndex:'approved', header:'Approved', width: 40, sortable: true, renderer: approvedColor},
{dataIndex:'table', header:'Type', width: 60, sortable: true},
{dataIndex:'gid', header:' ', width: 10, renderer: editIcon},
{dataIndex:'gid', header:'', width: 10, renderer: profileIcon},
{dataIndex:'gid', header:'', width: 10, renderer: uploadIcon},
{dataIndex:'approved', header:' ', width: 10, renderer: approveIcon},
{dataIndex:'approved', header:' ', width: 10, renderer: deleteIcon}
loadMask: true,

bbar: new Ext.PagingToolbar({
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

tbar : [
new Ext.form.ComboBox({
store: dropStore,
fieldLabel:'Layer Type',
mode: 'local',
triggerAction: 'all',
emptyText:'Select Layer Type',
fieldLabel: 'search',
name: 'search',
text : 'Go',
tooltip : 'Change the layer type',
handler : changeLayer
viewConfig: {
forceFit: true

ds.load({params:{table:'atsi', start:0, limit:25}});
ds.setDefaultSort('name', 'ASC');


function changeLayer(){
ds.load({params:{table:Ext.get('layerTable').dom.value,search:Ext.get('search').dom.value, start:0, limit:25}});
table = Ext.get('layerTable').dom.value;

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: './ajax-layers.php'

reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
fields: [
{name:'gid', type:'float'},

remoteSort: true// turn on remote sorting



$table = $_POST['table'];
$start = $_POST['start'];
$limit = $_POST['limit'];
$search = $_POST['search'];

$sql = "SELECT gid, name, approved FROM $table WHERE lower(name) LIKE lower('%$search%')";
$sql = "SELECT gid, name, approved FROM $table";
$rs = $db->Execute($sql);
$recordCount = $rs->RecordCount();
echo "{'totalCount':$recordCount,'data': [";

$sql = "SELECT gid, name, approved FROM $table WHERE lower(name) LIKE lower('%$search%') LIMIT $limit OFFSET $start";
$sql = "SELECT gid, name, approved FROM $table LIMIT $limit OFFSET $start";
$rs = $db->Execute($sql);

$i = 0;
while (!$rs->EOF) {
if($i != 0){echo ',';}
$gid = $rs->fields['gid'];
$name = $rs->fields['name'];
$name = str_replace("'", "", $name);
$name = str_replace("#", "", $name);
$name = str_replace("-", " ", $name);
$rand = rand(5, 15);

$approved = $rs->fields['approved'];
if($name != ""){
echo "{'gid':'$rand','name':'$name','approved':'$approved','table':'$table'}\n";


5 Mar 2008, 4:37 PM
A few potential problems that I see:
1) you probably want to put the param "table:'atsi'" in the store;s baseParams so that it gets included with every request (with your code it will only be sent with the inital load request).
2) you probably want to set the defaultSort before making the initial load request.

#1 is most likely the problem here, while #2 might cause you some hair pulling later on.

7 Mar 2008, 11:00 AM
I've got the same problem. I found in the a results range, that the symbol ' wasn't escaped like \'
An example:

rows: [
myField: 'this doesn't show'

7 Mar 2008, 11:25 AM
Along the lines of what devnull is saying, if you check the POST in your XHR in firebug console you should be able to inspect what is getting sent to your php script. After that I'd do some php debugging to inspect what is in the REQUEST array.

13 Mar 2008, 4:46 PM
I found updating the baseParams rather than passing the parameters in the load function was the only way to get paging working, makes sense you want the parameters to be available when you page not just in the initial load.


data.baseParams = {table:table, gid:gid, layer:layer};
data.load({params:{start:0, limit:25}});

Instead of

data.load({params:{start:0, limit:25, table:table, gid:gid, layer:layer}});