 | I could not get Grid to work using Example in the book |
|
27 Mar 2008, 17:03
Jason Lehman (2 posts) |
I didn’t know if I should add it to the Errata until I figured out if it was me or not. I am posting the code. Please let me know if I was just missing something from the example. Here were the things I had to do to get it to work: 1. programmatically get the JSON store because I couldn’t get the inline code version to ever do the XHR
var jsonStore = new dojo.data.ItemFileReadStore ({ url: "users.json"});
jsonStore.fetch();
2. Add a view and layout:
var view1 = {
cells: [[
{name: 'First Name', field: "first_name"},
{name: 'Last Name', width: "25em", field: "last_name"}
],
[
{name: 'Username', colSpan:"2", field: "username"}
]
]
};
var layout = [ view1 ];
3. Add a model and reference it in the table definition:
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="jsonStore" query="{ id:'*' }" >
<table id="grid" dojoType="dojox.Grid" model="model">
</table>
And here is the complete code that worked for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>
Grid
</title>
<style type="text/css">
@import "/dojoroot/dijit/themes/tundra/tundra.css";
@import "/dojoroot/dojo/resources/dojo.css";
@import "/dojoroot/dojox/grid/_grid/tundraGrid.css";
</style>
<style>
#grid {
border: 1px solid #333;
width: 550px;
margin: 10px;
height: 200px;
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript" src="/dojoroot/dojo/dojo.js" djconfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
var jsonStore = new dojo.data.ItemFileReadStore ({ url: "users.json"});
jsonStore.fetch();
// a grid view is a group of columns
var view1 = {
cells: [[
{name: 'First Name', field: "first_name"},
{name: 'Last Name', width: "25em", field: "last_name"}
],
[
{name: 'Username', colSpan:"2", field: "username"}
]
]
};
var layout = [ view1 ];
</script>
</head>
<body class="tundra">
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="jsonStore" query="{ id:'*' }" >
<table id="grid" dojoType="dojox.Grid" model="model">
</table>
</body>
</html>
|
|
28 Mar 2008, 17:58
Jason Lehman (2 posts) |
My bad. I was using the 1.0 release and should have been using the 1.1 release. I have upgraded and now I am good with the example in the book. |
| You must be logged in to comment |
This topic