Simple code refused to work, please help me!

[dragonfly]

I paste the code below:

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: '/test/FetchData.do'
}),

reader: new Ext.data.JsonReader({
root: 'records',
totalProperty: 'recordCount',
id: 'emplId'
}, [
{name: 'emplId'},
{name: 'name'}
]),

remoteSort: true
});
ds.setDefaultSort('emplId', 'asc');

var cm = new Ext.grid.ColumnModel([{
header: "Emp#",
dataIndex: 'emplId'
},{
header: "Name",
dataIndex: 'name'
}]);

cm.defaultSortable = true;

// create the editor grid
var grid = new Ext.grid.Grid('test-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true,
loadMask: true
});

// render it
grid.render();

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

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 1,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});

// trigger the data store load
ds.load({params:{start:0, limit:1}});

});

Request submitted: (got from firebug)
/test/FetchData.do?start=0&limit=1&sort=emplId&dir=ASC&_dc=1184361257058&callback=stcCallback1001

JSON data returned: (got from firebug)
stcCallback1001([{"records":[{"emplId":"1","name":"Steven Irwin"}],"recordCount":9736}]);

Anything wrong? It's so simple, but it doesn't work. Am I stupid or what?

Many thanks in advance!

[aconran]

Please post with Code formatting next time as it would make this much easier to read.

First off:
Your JSON response does not need to be wrapped in the callback function. You simply need


[{"records":[{"emplId":"1","name":"Steven Irwin"}],"recordCount":9736}]

returned.

Next, I didn't see in your code where you were actually setting the callback. Typically a Store callback is set in the load event as described in the docs here:
http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html#load

therefore your code would look like this:


ds.load({params: {start:0, limit:1}, callback: stcCallBack1001, scope: stcCallbacksScope});


Note, scope should be the object in which you have defined your stcCallBack1001 function.

stcCallback1001 will be called with the following params
* record
* opts
* success

It's definition would look something like this:


function stcCallBack1001(record, opts, success) {
if (success) {
// do whatever
} else {
// error!!
}
}


Hope this helps,
Aaron Conran

[Animal]

The response needs to be wrapped in a callback function is the "callback" parameter is passed because a ScriptTagProxy requires executable javascript, not an object literal (somehow known as "JSON" nowadays)

[dragonfly]

I used the grid tutorial code, but it has a bug. The returned JSON is supposed to be a JSON object, not a JSON array. The JSON object already has the JSON object array in it.

Yes, the callback is because ScriptTagProxy. If use HttpProxy instead, we don't need to wrap it around with the callback function.

Thank you all for the help!

~D