Javascript 如何让GridX显示
我没有成功地显示我的Javascript 如何让GridX显示,javascript,web-applications,dojo,dojo.gridx,Javascript,Web Applications,Dojo,Dojo.gridx,我没有成功地显示我的GridX。我目前在firebug中发现了4个错误,都与dojo.js有关,两个错误:scriptError一个错误:multipleDefine和一个奇怪的错误:GEThttps://localhost:8443/warfile/javascript/dojo-未找到release-1.10.0/dojo/store/templates/Grid.html 404 我正试着跟着这个 这是我的密码: <!DOCTYPE html> <html> <
GridX
。我目前在firebug中发现了4个错误,都与dojo.js有关,两个错误:scriptError
一个错误:multipleDefine
和一个奇怪的错误:GEThttps://localhost:8443/warfile/javascript/dojo-未找到release-1.10.0/dojo/store/templates/Grid.html 404
我正试着跟着这个
这是我的密码:
<!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小部件
.gridx{
宽度:400px;
高度:200px;
}
要求([
//需要资源。
“dojo/store/Memory”,
“gridx/core/model/cache/Sync”,
“gridx/Grid”
],功能(内存、缓存、网格){
//在这里使用dojo/store/Memory
var存储=新内存({
数据:[
{id:1,名字:'John',分数:130,城市:'New York',生日:'1980/2/5'},
{id:2,名字:'Alice',分数:123,城市:'Washington',生日:'1984/3/7'},
{id:3,名字:'Lee',分数:149,城市:'Shanghai',生日:'1986/10/8'},
{id:4,名字:'Mike',分数:100,城市:'London',生日:'1988/8/12'},
{id:5,名字:'Tom',分数:89,城市:'San Francisco',生日:'1990/1/21'}
]
});
//我们使用的是内存存储,所以一切都是同步的。
var cacheClass=“gridx/core/model/cache/Sync”;
变量结构=[
{id:'name',field:'name',name:'name',width:'50px'},
{id:'city',字段:'city',名称:'city'},
{id:'score',field:'score',name:'score',width:'80px'}
];
//创建网格小部件。
var网格=网格({
id:'网格',
cacheClass:Cache,
店:店,,
结构:结构
});
//把它放到DOM树中,假设有一个id为“gridContainer”的节点。
grid.placeAt('gridContainer');
//启动它。
grid.startup();
});
以下是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>
网格测试
/*使用claro主题*/
@导入“javascript/dojo-release-1.10.0/dijit/themes/claro/claro.css”;
@导入“javascript/dojo-release-1.10.0/dijit/themes/claro/document.css”;
/*导入Gridx的主CSS文件*/
@导入“javascript/dojo-release-1.10.0/gridx-1.3/resources/claro/gridx.css”;
.gridx{
宽度:400px;
高度:200px;
}
var dojoConfig={
async:true,
baseUrl:“/javascript/”,
tlmSiblingOfDojo:错误,
套餐:[
{名称:“dojo”,位置:“dojo-release-1.10.0/dojo”},
{名称:“dijit”,位置:“dojo-release-1.10.0/dijit”},
{名称:“dojox”,位置:“dojo-release-1.10.0/dojox”},
{名称:“gridx”,位置:“dojo-release-1.10.0/gridx-1.3”}
]
};
要求([
//需要资源。
“dojo/store/Memory”,
“gridx/core/model/cache/Sync”,
“gridx/Grid”
],功能(内存、缓存、网格){
//创建店铺。。。。。。
var存储=新内存({
数据:[
{id:1,名字:'John',分数:130,城市:'New York',生日:'1980/2/5'},
{id:2,名字:'Alice',分数:123,城市:'Washington',生日:'1984/3/7'},
{id:3,名字:'Lee',分数:149,城市:'Shanghai',生日:'1986/10/8'},
{id:4,名字:'Mike',分数:100,城市:'London',生日:'1988/8/12'},
{id:5,名字:'Tom',分数:89,城市:'San Francisco',生日:'1990/1/21'}
]
});
//创建结构。。。。。。
变量结构=[
{id:'name',field:'name',name:'name',width:'50px'},
{id:'city',字段:'city',名称:'city'},
{id:'score',field:'score',name:'score',width:'80px'}
];
//创建网格小部件。
var网格=网格({
id:'网格',
cacheClass:Cache,
店:店,,
结构:结构
});
//把它放到DOM树中,假设有一个id为“gridContainer”的节点。
grid.placeAt('gridContainer');
//启动它。
grid.startup();
});
多亏了来自dojo论坛的Rick Lacy,他引导我进入了一个工作网格。你可以看到那根柱子。问题是我有data dojo config=“async:true”…
这意味着它会自动拉入GridX js,而我的页面中仍然包含GridX js文件,这导致我的网格无法工作。我只是删除了这两行:
<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>
我还将我的gridx-1.3目录重命名为gridx,以使其更加标准化。我猜gridx应该安装在与dojo相同的级别上。i、 e
gridx
路径应该是javascript/dojo-release-1.10.0/gridx-1.3
,与dojojavascript/dojo-release-1.10.0/dojo
相同。希望它能起作用。@frank谢谢你的评论,我将gridx-1.3
文件夹移到dojo-release-1.10.0
文件夹中,并更新了我HTML
文件中的三个gridx
路径,现在我的浏览器中没有像以前那样得到任何东西,firebug也没有显示任何错误。我用鼠标右键点击,查看了页面源代码,点击了我所有的src文件,它们都显示得很好。现在怎么办?:)谢谢弗兰克,非常感谢你的努力,但这对我不起作用。我也在IE中试用过,效果也一样。在firebug中,我得到了3个Error:scriptError
wit