Hi all, I have been struggeling all day to read a json file from server and view it via dojo datagrid. Please see the code snippets below and help me if possible :
the html file is ::
<head>
<link rel="stylesheet" type="text/css" href="../../_static/js/dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
@import "../../_static/js/dojox/grid/resources/Grid.css"; @import "../../_static/js/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%;
margin: 0; }
</style>
</head>
<body class=" claro ">
<div id="gridContainer4" style="width: 100%; height: 100%;">
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.CsvStore");
dojo.addOnLoad(function() {
// our test data store for this example:
var store4 = new dojo.data.ItemFileReadStore({
url: "http://localhost/test1.json"});
// set the layout structure:
var layout4 = [{
field: 'abbr',
name: 'Title of Movie',
width: '200px'
},
{
field: 'name',
name: 'Year',
width: '50px'
},
{
field: 'capital',
name: 'Producer',
width: 'auto'
}];
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
abbr: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
The json is ::
{ identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'eg', name:'Egypt', capital:'Cairo' },
{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
{ abbr:'er', name:'Eritrea', capital:'Asmara' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn' },
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }
]}