我尝试过使用dojo的gridx创建网格的示例，方法是在线包含所有src。 但它显示主线程上的同步XMLHttpRequest已被弃用，因为它对最终用户的体验和multipleDefine错误产生了不利影响
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"></script>
<script
src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"></script>
<script type="text/javascript">
var grid;
var store;
dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
name: 'gridx', store = new Memory({
data : [ {
id : 1,
feedname : 'Feed4',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'Feed5',
startstop : 0,
pause : '',
config : ''
} ]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{
id : 'feedname',
field : 'feedname',
name : 'Feed Name',
width : '110px'
},
{
id : 'startstop',
field : 'startstop',
name : 'Start/Stop',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'pause',
field : 'pause',
name : 'Pause',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'config',
field : 'config',
name : 'Config',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>' ].join('');
}
} ];
//Create grid widget.
grid = Grid({
id : 'grid',
cacheClass : Cache,
store : store,
structure : structure,
//autoHeight: true,
columnWidthAutoResize : false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store) {
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data : [ {
id : 1,
feedname : 'testingThis1',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'testingThis2',
startstop : 0,
pause : '',
config : ''
}, {
id : 3,
feedname : 'testingThis3',
startstop : 0,
pause : '',
config : ''
}, {
id : 4,
feedname : 'testingThis4',
startstop : 0,
pause : '',
config : ''
}, {
id : 5,
feedname : 'testingThis5',
startstop : 0,
pause : '',
config : ''
}, {
id : 6,
feedname : 'testingThis6',
startstop : 0,
pause : '',
config : ''
}, {
id : 7,
feedname : 'testingThis7',
startstop : 0,
pause : '',
config : ''
} ]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
}
var toggled = false;
function toggle() {
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
: "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick() {
alert("Pause!");
}
function onConfigButtonClick() {
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick() {
alert("onStartStopButtonClick!");
}
function onPauseButtonClick() {
alert("onPauseButtonClick!");
}
function onConfigButtonClick() {
alert("onConfigButtonClick!");
}
</script>
</head>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
我正在尝试使用Tomcat服务器，但无法获取网格。 你能帮帮我吗？
答案 0 :(得分：2)
你缺少dojo require语句。您可以在下面找到工作代码。我相信你是道场的初学者，所以你可以找到关于道场@ http://dojotoolkit.org/reference-guide/1.7/dojo/require.html
的优秀文章 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' data-dojo-config="async: true, parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/oria/gridx/1.3/resources/claro/Gridx.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/document.css">
<script type='text/javascript'>//<![CDATA[
var grid;
var store;
require({
packages: [
{
name: 'gridx',
location: '//cdn.rawgit.com/oria/gridx/1.3'
}
]
},[
//Require resources.
"dojo/dom",
"dojo/store/Memory",
"dijit/form/Button",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/CellWidget",
"dojo/domReady!"
], function(dom, Memory, Button, Cache, Grid){
store = new Memory({
data: [
{ id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''}
]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{ id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' },
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
{ id: 'pause', field: 'pause', name: 'Pause', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn2.set('label2', data);
}
},
{ id: 'config', field: 'config', name: 'Config', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(gridData, storeData, cellWidget){
//"this" is the cell widget
cellWidget.btn3.set('label3', data);
}
}
];
//Create grid widget.
grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
structure: structure,
autoHeight: true,
columnWidthAutoResize: false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store){
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data: [
{ id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''},
{ id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''},
{ id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''},
{ id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''},
{ id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''},
{ id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''}
]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store, appFeedListJSON);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
//},
//error: function (error) {
// console.log("Inside ERROR");
// }
//});
}
function onStartStopButtonClick(){
alert("Start/Stop!");
}
var toggled = false;
function toggle(){
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon" : "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick(){
alert("Pause!");
}
function onConfigButtonClick(){
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick(){
alert("onStartStopButtonClick!");
}
function onPauseButtonClick(){
alert("onPauseButtonClick!");
}
function onConfigButtonClick(){
alert("onConfigButtonClick!");
}
//]]>
</script>
</head>
<body>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
</html>