Javascript 使用dojo的gridx创建网格
我尝试了下面的例子，通过包含所有在线的src，使用dojo的gridx创建网格。 但它表明，主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验造成有害影响，并且会导致多次错误Javascript 使用dojo的gridx创建网格,javascript,html,dojo,Javascript,Html,Dojo,我尝试了下面的例子，通过包含所有在线的src，使用dojo的gridx创建网格。 但它表明，主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验造成有害影响，并且会导致多次错误 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script> <script src="http://ajax.googleapis.com/ajax/libs
<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>
var网格；
var存储；
addOnLoad（函数（dom、内存、按钮、缓存、网格）{
名称：“gridx”，存储=新内存({
数据：[{
id:1，
feedname:'Feed4'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:2，
feedname:'Feed5'，
startstop:0，
暂停：“”，
配置：“”
} ]
});
var cacheClass=“gridx/core/model/cache/Sync”；
变量结构=[
{
id:'feedname'，
字段：“feedname”，
名称：'源名称'，
宽度：“110px”
},
{
id:“startstop”，
字段：“startstop”，
名称：“开始/停止”，
宽度：“61px”，
widgetsInCell：是的，
通航：对，
allowEventBubble：对，
decorator:function（）{
//生成单元格小部件模板字符串
返回[
''）。加入（''）；
}
},
{
id:'暂停'，
字段：“暂停”，
名称：“暂停”，
宽度：“61px”，
widgetsInCell：是的，
通航：对，
allowEventBubble：对，
decorator:function（）{
//生成单元格小部件模板字符串
返回[
''）。加入（''）；
}
},
{
id:'配置'，
字段：“配置”，
名称：'Config'，
宽度：“61px”，
widgetsInCell：是的，
通航：对，
allowEventBubble：对，
decorator:function（）{
//生成单元格小部件模板字符串
返回[
''）。加入（''）；
}
} ];
//创建网格小部件。
网格=网格({
id:'网格'，
cacheClass:Cache，
店:店,，
结构:结构,，
//自动高度：正确，
columnWidthAutoResize:false
});
//将其放入DOM树中。
grid.placeAt（'compactWidgetGrid'）；
//启动它。
grid.startup（）；
//TODO:我需要以某种方式将内存和存储设为全局，以便在创建网格之前获取数据！！
updateGridXData（内存、存储）；
});
函数createDataStore（内存、存储）{
currentGridXData=新内存({
//TODO:将此处的数据替换为从服务器接收的实际提要数据！
数据：[{
id:1，
feedname:'testingThis1'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:2，
feedname:'testingThis2'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:3，
feedname:'TestingThis 3'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:4，
feedname:'testingThis4'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:5，
feedname:'TestingThis 5'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:6，
feedname:'TestingThis 6'，
startstop:0，
暂停：“”，
配置：“”
}, {
id:7，
feedname:'testingThis7'，
startstop:0，
暂停：“”，
配置：“”
} ]
});
返回currentGridXData；
}
函数updateGridXData（内存、存储）{
grid.model.clearCache（）；
var AppFeedssStore；
//为GridX创建新的数据存储
//此行给出了一个JavaScript错误，因为appFeedListJSON未定义。
//输入并取消注释另一行以查看差异。
appFeedsStore=createDataStore（内存、存储）；
//appFeedsStore=createDataStore（内存、存储）；
网格设置存储（appFeedsStore）；
grid.model.store.setData（appFeedsStore）；
//grid.refresh（）；
grid.body.refresh（）；
}
var-toggled=false；
函数切换（）{
myToggleButton.set（“iconClass”，切换？“startStopButtonPlayIcon”
：“startStopButtonStopIcon”）；
toggled=！toggled；
}
函数onPauseButtonClick（）{
警惕（“暂停！”）；
}
函数onConfigButtonClick（）{
警报（“配置！”）；
}
//应用程序的onClick功能三个按钮：开始/停止、暂停、配置
函数onStartStopButtonClick（）{
警报（“onStartStopButtonClick！”）；
}
函数onPauseButtonClick（）{
警报（“onPauseButtonClick！”）；
}
函数onConfigButtonClick（）{
警报（“onConfigButtonClick！”）；
}
您能帮我一下吗？您缺少dojo require语句。您可以在下面找到工作代码。我相信您是dojo的初学者，因此您可以找到关于dojo@
//
<!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>