I am not having any success in getting my GridX
to display. I am currently getting 4 errors in firebug all pertaining to dojo.js, two Error: scriptError
one Error: multipleDefine
and one weird one: GET https://localhost:8443/warfile/javascript/dojo-release-1.10.0/dojo/store/templates/Grid.html 404 Not Found
I am trying to follow this poorly documented example from the Gridx wiki
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test GridX Widget</title>
<script type="text/javascript" src="javascript/dojo-release-1.10.0/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true" ></script>
<script type="text/javascript" src="javascript/gridx-1.3/Grid.js"></script>
<script type="text/javascript" src="javascript/gridx-1.3/GridCommon.js"></script>
<link rel="stylesheet" href="javascript/dojo-release-1.10.0/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="javascript/dojo-release-1.10.0/dijit/themes/claro/document.css" />
<link rel="stylesheet" href="javascript/gridx-1.3/resources/claro/Gridx.css" />
<style type="text/css">
.gridx {
width: 400px;
height: 200px;
}
</style>
<script>
require([
//Require resources.
"dojo/store/Memory",
"gridx/core/model/cache/Sync",
"gridx/Grid"
], function(Memory, Cache, Grid){
//Use dojo/store/Memory here
var store = new Memory({
data: [
{ id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5'},
{ id: 2, name: 'Alice', score: 123, city: 'Washington', birthday: '1984/3/7'},
{ id: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '1986/10/8'},
{ id: 4, name: 'Mike', score: 100, city: 'London', birthday: '1988/8/12'},
{ id: 5, name: 'Tom', score: 89, city: 'San Francisco', birthday: '1990/1/21'}
]
});
//We are using Memory store, so everything is synchronous.
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{ id: 'name', field: 'name', name: 'Name', width: '50px'},
{ id: 'city', field: 'city', name: 'City'},
{ id: 'score', field: 'score', name: 'Score', width: '80px'}
];
//Create grid widget.
var grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
structure: structure
});
//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
grid.placeAt('gridContainer');
//Start it up.
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridContainer"></div>
</body>
</html>
Thanks to Rick Lacy, from the dojo forums, he guided me to a working GridX. You can see the post HERE. The problem was that I had data-dojo-config="async: true"...
which means it pulls in the GridX js automatically and I was still including the GridX js files in my page which was causing my grid not to work. I simply removed these two lines:
<script type="text/javascript" src="javascript/dojo-release-1.10.0/gridx-1.3/Grid.js"></script>
<script type="text/javascript" src="javascript/dojo-release-1.10.0/gridx-1.3/GridCommon.js"></script>
I also renamed my gridx-1.3 directory to gridx to be more standardized.