我无法成功显示我的GridX。我目前在Firebug中收到4个与dojo.js有关的错误，两个Error: scriptError一个Error: multipleDefine和一个奇怪的错误：GET https://localhost:8443/warfile/javascript/dojo-release-1.10.0/dojo/store/templates/Grid.html 404 Not Found
我正在尝试遵循此poorly documented example from the Gridx wiki
这是我的代码：
<!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>
最佳答案
这是GridX的工作代码。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GridX testing</title>
<style type="text/css">
/*Use claro theme.*/
@import "javascript/dojo-release-1.10.0/dijit/themes/claro/claro.css";
@import "javascript/dojo-release-1.10.0/dijit/themes/claro/document.css";
/*Import the main CSS file of Gridx.*/
@import "javascript/dojo-release-1.10.0/gridx-1.3/resources/claro/Gridx.css";
.gridx {
width: 400px;
height: 200px;
}
</style>
<!-- dojo configuration options -->
<!-- For Package configuration refer tutorial at http://dojotoolkit.org/documentation/tutorials/1.7/modules/ -->
<script type="text/javascript">
var dojoConfig = {
async: true,
baseUrl: "/javascript/",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "dojo-release-1.10.0/dojo" },
{ name: "dijit", location: "dojo-release-1.10.0/dijit" },
{ name: "dojox", location: "dojo-release-1.10.0/dojox" },
{ name: "gridx", location: "dojo-release-1.10.0/gridx-1.3" }
]
};
</script>
<!-- third-party javascript -->
<script src="javascript/dojo-release-1.10.0/dojo/dojo.js"></script>
<script>
require([
//Require resources.
"dojo/store/Memory",
"gridx/core/model/cache/Sync",
"gridx/Grid"
], function(Memory, Cache, Grid){
//create store......
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'}
]
});
//create structure......
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>