【发布时间】:2014-02-15 17:53:36
【问题描述】:
当我尝试通过创建 gridx/grid 来加载模块时,我的脚本去了一个奇怪的地方,在那里错误由看起来像 gobbledy gook 的代码处理。 如果我创建没有模块属性的网格,则行显示得很好。我在理性应用程序开发人员 9.1 中使用 worklight 6.1 进行编码,使用的是(随 RAD 提供的)dojo 1.9。 我的道场包括这样指定:
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory",
"gridx/Grid", "gridx/core/model/cache/Sync", "dojox/mobile/Container",
"gridx/modules/SingleSort"],
function(ready) { ...
这是我的样式表链接:
<link rel="stylesheet" href="css/dojo.css" />
<link rel="stylesheet" href="css/claro.css" />
<link rel="stylesheet" href="css/document.css" />
<link rel="stylesheet" href="css/Gridx.css" />
<link rel="stylesheet" href="css/Gridx_rtl.css" />
我暂时将 css 文件从 gridx/resources/claro/Gridx.css 和 dojo 工具包库中的其他位置移动到已知的相对位置,以消除 css 文件无法解析的可能性。我只在放置此网格的 div 中指定“claro”类。在这两种情况下,网格的行为没有区别。
我的网格是这样创建的:
toStore=new dojo.store.Memory({ idProperty: 'PICYNO', data: resultSet });
toColumns=[
{ id: 'PICYNO', field: 'PICYNO', name: 'Cycle' , width: '80px' , editable: true },
{ id: 'PIDSC1', field: 'PIDSC1', name: 'Description' , width: '300px', editable: true },
{ id: 'PICYCS', field: 'PICYCS', name: 'Status' , width: '60px' , editable: true },
{ id: 'PPICSDJ',field: 'PPICSDJ', name: 'Date' , width: '80px' , editable: true },
{ id: 'PICYIT', field: 'PICYIT', name: 'Items' , width: '60px' , editable: true },
{ id: 'PICYLO', field: 'PICYLO', name: 'Locations' , width: '60px' , editable: true }
];
var cacheClass = "gridx/core/model/cache/Sync";
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: cacheClass,
store: toStore,
// modules:[modules.SingleSort, modules.SelectRow],
// modules:[gridx.modules.SingleSort],
// modules:[gridx/modules/SingleSort],
// modules: [ SingleSort ],
// modules: [ Sort ],
structure: toColumns
});
tsGrid.placeAt('idGridContentPane');
tsGrid.startup();
如果我注释所有指定“模块:”的行,如您所见,则显示网格(但它很难看,好像根本没有应用样式表。)
如果我尝试指定标准排序模块的任何变体,这个函数就会失败。我知道这可能是因为我没有正确指定我的环境,但我看不出如何。
我使用的任何版本有任何已知问题吗?任何建议表示赞赏。
--------- 更新了------------
我已经进步到可以显示网格的程度,但格式仍然关闭。
基于对非 worklight 项目的实验结果,在该项目中我能够使用模块实现网格,并且还意识到无论使用哪种类型的项目(web 或 worklight),我都能够解析 dojo 和 Gridx 对象即使 javascript 资源的配置不同,我还是决定尝试使用本地 require 语句在直接上下文中指定 dojo 模块,并且它起作用了。 worklight 中的原始dojo 配置是在使用worklight 应用程序自动生成的main.js 对象中配置的。它看起来像这样:
function wlCommonInit() {
require([ "layers/core-web-layer", "layers/mobile-ui-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory", "dojox/mobile/Container",
"gridx/modules/SingleSort", "gridx/modules/ColumnResizer", "gridx/modules/RowHeader"
],
function(ready) {
ready(function() {
ccInit();
});
});
}
我从 main.js 中删除了模块声明,并将它们添加到创建网格的 ccInit.js 应用程序中,如下所示:
function populateGrid() {
require([
'dojo/store/Memory',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/SingleSort',
'gridx/modules/ColumnResizer',
'gridx/modules/RowHeader'
], function(Store, Grid, Cache, Sort, ColumnResizer, RowHeader) {
. . .
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: Cache,
store: toStore,
modules: [ Sort, ColumnResizer, RowHeader ],
structure: toColumns,
selectRowTriggerOnCell: true
});
...
网格在如图所示的即时需求上下文中创建时成功创建。如果我使用非即时方法,许多 dojo 调用甚至没有模块的网格都可以工作。
不过,风格仍然很混乱。列标题是空白的,表格看起来一点也不像 claro 样式的网格。我确信我已经正确设置了 html 标头中的 css 包含(使用我的工作 Web 项目作为模型)。是否有一些工作灯初始化或“皮肤”覆盖物搞砸了?
感谢您的任何评论。
--- 解决方法是在本地引用所有类。
我通过在 common\css 文件夹中创建 gridx.css 解决了样式表的问题,然后我通过将每个 @import 替换为导入的 css 源的副本/粘贴来编辑它。所以我的 gridx.css 是所有导入的所有源代码的合并。我在我的标题链接中指向那个 css\gridx,我得到了合理的结果。
总而言之,我必须在自定义函数中明确要求 gridx 类,而不是在 main.js 中的 dojo require 语句中。我不得不合并所有的 gridx 样式并在本地引用它们。 gridx.css 和其他样式表没有通过相对路径解决的问题包括指向 dojo 工具包的问题似乎是一个错误。这些样式表似乎已加载到运行时生成的服务器中,控制台消息如下所示:
加载资源失败:服务器响应状态为 404(未找到)http://myWLdevServer.mycomputer.local:10080/JustGridx/apps/services/preview/JustGridx/common/0/default/dojo/gridx/resources/claro/Gridx.css
如果开发人员应该进行某种服务器配置以指向这些 CSS 文件,那么我看不到它。
如果有人同意我的观点,即这是一个最坏的错误或不直观,最好记录在案,我将把这篇文章留作未解决。
【问题讨论】:
-
您是否可以共享 Worklight 项目或创建一个仅显示问题的 gridx 的测试用例,然后共享?
-
这是一个很好的建议,因为当我在一个新的 Web 项目中测试它时,代码确实可以工作。我看到在 RAD 中的 worklight 和 web 项目之间放置/引用 dojo 工具包的方式是不同的。我将从那个角度深入研究并更新这个线程。谢谢。
-
然后我回到我原来的建议,就是在一个小的测试用例项目中实现gridx。我的意思是实际上是一个新的 Worklight 项目......它展示了这个问题,而不是你拥有它的成熟项目。
-
我确实创建了一个项目,只是根据您的建议尝试实施 gridx,这有助于我隔离问题。我如何与您分享?你想让我复制/粘贴 html+js 吗? (对不起,我是堆栈溢出的新手。)
-
上传到 Dropbox。 :)
标签: dojo ibm-mobilefirst dojo.gridx