Question about HttpProxy and parameters

[utherwayn]

So I have been trying to modify an existing tutorial: Basics of Paging With the Grid Component.

I am using his database but using my own script and trying to convert to a HttpProxy instead of a ScriptTagProxy. Seems like a really simple task and im sort of ashamed that I couldn't think my way through it however I am sort of new to javascript. Below is my PHP script and JS

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];

$rs_count = mysql_query($sql_count);

$rows = mysql_num_rows($rs_count);

$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}

Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';


Ext.onReady(function(){

var ds = new Ext.data.Store({
// HttpProxy should be used here
proxy: new Ext.data.HttpProxy({
url: 'http://sandbox.andylogic.com/extjs/grid-paging-data.php'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'employee_name', mapping: 'name'},
{name: 'job_title', mapping: 'title'},
{name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
{name: 'is_active', mapping: 'active'}
])

});

var cm = new Ext.grid.ColumnModel([{
id: 'name',
header: "Name",
dataIndex: 'employee_name',
width: 100
},{
header: "Title",
dataIndex: 'job_title',
width: 170
},{
header: "Hire Date",
dataIndex: 'hire_date',
width: 70,
renderer: Ext.util.Format.dateRenderer('n/j/Y')
},{
header: "Active",
dataIndex: 'is_active',
width: 50
}]);

var grid = new Ext.grid.Grid('grid-paging', {
ds: ds,
cm: cm,
autoExpandColumn: 'name'
});

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});

ds.load({params:{start:0, limit:25}});

});


This is essentially exactly the same code as his with the only exception being that I changed ScriptTagProxy to HttpProxy. I looked up in the reference documentation and they both seem to accept the same format yet with HttpProxy the script doesn't work and with ScriptTagProxy it does.

Firebug provides me with the following PHP error from the server
<b>Warning</b>: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in <b>

/home/.ann/utherwayn/sandbox.andylogic.com/extjs/grid-paging-data.php</b> on line <b>15</b><br />

({"total":"200","results":null})

So it basically says it is getting no data. I have tracked it down to the ds.load() line in my JS, for some reason it seems the parameters are not being passed in correctly which leads me to believe that unless there is a bug which I highly doubt there is in what has to be a commonly used component, that my javascript too weak and they actually DONT accept the same parameter format for load.

Can someone let me know which is the case? Is this a bug or is this my own failed understanding of javascript?

[Animal]

ScriptTagProxy requires that you call a callback.

Your code is attempting to do so.

http://extjs.com/deploy/ext-1.1-beta1/docs/output/Ext.data.ScriptTagProxy.html#config-callbackParam

[utherwayn]

Well that wasn't it but it did make me think about things a little more. I forgot that firebug also records posts on ajax requests i noticed that it was using post and the php file was looking for gets. I can't believe I didn't think of that earlier. Thank you so much animal for your prompt reply =).

[Animal]

You don't have to call a callback. You still have


Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';


When you need


Echo '{"total":"'.$rows.'","results":'.json_encode($arr).'}';

[redalerthan]

I met the same question as utherwayn .
HttpProxy return no data just because the results of ("total":"200","results":null) is null. It seems that HttpProxy load the data URL before got the params of start:0, limit:25; it seems the *-data.php need more code to ensure $rs is not null. I think the topics-remote.php (http://www.yui-ext.com/forum2/topics-remote.php)in the ext-js exmple is good, is there any one can provide the php code ?

[utherwayn]

This seemed to do the trick for me. Like I said earlier it seems that HttpProxy defaults to using post for data instead of get. Sorry for the late reply.

// ** data.php **/

<?php

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_POST['start'].", ".$_POST['limit'];

$rs_count = mysql_query($sql_count);

$rows = mysql_num_rows($rs_count);

$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}

Echo '({"total":"'.$rows.'","results":'.json_encode($arr).'})';

?>


// ** grid-example.js **//

Ext.onReady(function(){

var ds = new Ext.data.Store({
// HttpProxy should be used here
proxy: new Ext.data.HttpProxy({
url: 'data.php'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'employee_name', mapping: 'name'},
{name: 'job_title', mapping: 'title'},
{name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
{name: 'is_active', mapping: 'active'}
])

});

var cm = new Ext.grid.ColumnModel([{
id: 'name',
header: "Name",
dataIndex: 'employee_name',
width: 100
},{
header: "Title",
dataIndex: 'job_title',
width: 170
},{
header: "Hire Date",
dataIndex: 'hire_date',
width: 70,
renderer: Ext.util.Format.dateRenderer('n/j/Y')
},{
header: "Active",
dataIndex: 'is_active',
width: 50
}]);

var grid = new Ext.grid.Grid('grid-paging', {
ds: ds,
cm: cm,
autoExpandColumn: 'name'
});

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});

ds.load({params:{start:0, limit:25}});

});