【问题标题】:gridx modules won't load in my rational/worklight environmentgridx 模块不会在我的rational/worklight 环境中加载
【发布时间】: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


【解决方案1】:

来自 user3208130 的 cmets:

很抱歉一直没有跟进。我终于工作了 通过不导入任何东西来解决问题。我复制了主 gridx.css 从 gridx\resources 到我的项目中,然后为每个 该文件中列出的导入,我从 gridx 集合中的各个位置以及所有 claro css 文件,因为 gridx 仅使用该字体。我不得不关掉 主题切换取决于设备,因为 claro 看起来很糟糕 windows8 和 android 否则。

我知道这没有任何意义,但我尝试了我可以为导入想象的各种相对和显式路径 html 标头和主 css 文件中的语句 没有其他工作。我怀疑css文件没有被复制 创建设备环境时自动创建但我不能 证明这一点。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-03
    • 1970-01-01
    • 2021-07-15
    • 1970-01-01
    相关资源
    最近更新 更多