PDA

View Full Version : Data Proxy Documentation



markbarton
24 Apr 2007, 1:39 AM
Hi,

Just wondered if I had missed something, but I can't find any documentation on data.HttpProxy and data.ScriptTagProxy.

Also would be great if someone could provide JSON examples when using both methods (e.g. when you place quotes around the variables and when not as well as when you place brackets around the JSON output).

Thanks in advance if anyone can help.

Mark

Animal
24 Apr 2007, 3:32 AM
The documentation comments for the data package are there in SVN, just waiting for the next release and update of the docs page.

"Json" is just javascript. When you send "Json" back from your server, you are sending javascript source code.

Meanwhile here is some code that you can drop into the examples/grid directory.

It creates a grid from "Json", ie from a javascript object. Check line 71, that passes a javascript object containing the grid's data into the createGrid function.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Json Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../../src/data/JsonReader.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<script type="text/javascript">
function createGrid(data) {
var guests = Ext.data.Record.create([
{name: 'firstName', mapping: 'guestName.first'},
{name: 'secondName', mapping: 'guestName.second'},
{name: 'address', mapping: 'address[0]'},
{name: 'occupation', mapping: 'occupation'},
{name: 'attendingReception', mapping: 'comingToReception'},
{name: 'attendingCeremony', mapping: 'comingToCeremony'}
]);

// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
id: 'id',
root: 'guests',
}, guests);

// create the Data Store
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: reader,
remoteSort: true
});
ds.setDefaultSort('guest', 'desc');

var cm = new Ext.grid.ColumnModel([
{ header:'First Name', dataIndex:'firstName'},
{ header:'Second Name', dataIndex:'secondName' },
{ header:'Address', dataIndex:'address' },
{ header:'Occupation', dataIndex:'occupation' },
{ header:'Attending Ceremony', dataIndex:'attendingCeremony' },
{ header:'Attending Reception', dataIndex:'attendingReception' }
]);

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

// render it
ds.load();
grid.render();
grid.getSelectionModel().on("selectionchange", function(sm) {
var r = sm.getSelected();
if (r) {
alert("Clicked guest id: " + r.id + ", " + r.get("firstName") + " " + r.get("secondName"));
}
});
}
Ext.onReady(function() {
new Ext.Button(document.body, {
text: "Create",
handler: function() {
createGrid({"guests":[
{"id":1,"address":["Rose Cottage", "Orchard Lane", ""],"comingToReception":true,"guestName":{first:"Lily",second:"Tran"},"occupation":"Engineer","comingToCeremony":false},
{"id":2,"address":["Appt. 20", "Suicide Appartments", ""],"comingToReception":false,"guestName":{first:"Alfred",second:"Wong"},"occupation":"Trucker","comingToCeremony":true},
{"id":3,"address":["6 Main Street", "Townsville", ""],"comingToReception":true,"guestName":{first:"Alfred",second:"Bloggs"},"occupation":"Bloke","comingToCeremony":false},
{"id":4,"address":["10 Downing Street", "London", ""],"comingToReception":false,"guestName":{first:"Tony",second:"Bliar"},"occupation":"Thief","comingToCeremony":true},
{"id":5,"address":["1600 Pennsylvania Ave.", "Washington", ""],"comingToReception":true,"guestName":{first:"George",second:"Bush"},"occupation":"Moron","comingToCeremony":false},
{"id":6,"address":["Pit of sulphur", "Hell", ""],"comingToReception":false,"guestName":{first:"Saddam",second:"Hussein"},"occupation":"Murderer","comingToCeremony":true}
]})
}
});
});
</script>
</head>
<body>
<div id="container" style="height:200px;width:600px"></div>
</body>

markbarton
24 Apr 2007, 4:16 AM
Thanks Animal.

I assume then from your comments that the JSON source data is the same regardless whether I use a HttpProxy or a ScriptTagProxy as I undertsood that JSON formatted data is sent as a string and then evaluated into a Javascript Object using an eval statement.

Really my issues come down to not getting the ScriptTagProxy to work and only sometimes getting the HttpProxy working. When I look at the various examples some put quotes around the JSON variable names and others don't.

Its a little frustrating so a comprehensive but simple example of HttpProxy and ScriptTagProxy along with the source JSON data would be cool. i.e. the JSON data is stored elsewhere.

Anyway I will get there eventually.

Mark

Animal
24 Apr 2007, 4:48 AM
ScriptTagProxy should only be used if you are getting data from a different domain. XMLHttpRequests can't go cross domain.

Whan a ScriptTagProxy is being used, it will pass an HTTP parameter "callback" to the server, and your script/servlet must wrap the data with a call to that, so to handle both cases:



String callbackFn = request.getParameter("callback");
if (callbackFn != null) {
out.write(callbackFn + "(");
}
out.write(myJsonData); // or call a method to output the Json data...
if (callbackFn != null) {
out.write(callbackFn + ");");
}


It's safer to put quotes around the property names in an object literal if the names are reserved words, eg:



var foo = {"function": "delete", entity:"Consignment", id:1};


The Json standard will tell you that you must always use quotes, so that's what that example does, but it's going to be compiled by javascript, so I'd say make it look like javascript!

Animal
24 Apr 2007, 4:50 AM
http://www.ietf.org/rfc/rfc4627.txt

See the example in section 8.

markbarton
24 Apr 2007, 5:11 AM
Thats great thanks. It was the callback function I was missing, I hadn't realised I needed to wrap the returned JSON data in the function call.

Thanks for clearing up the quotes issues as well :-)