dojo - IBM Worklight 5.0.6 - 无法添加外部 Dojo 组件(需要 Dojo Dgrid 时出现脚本错误)

Question

我已经下载了Dgrid并且，在重命名 dgrid 中的文件夹后，我将其移动到 Dojo 文件夹中。

在 HTML 中我像这样包含它:

<!--application UI goes here-->
<script type="text/javascript" src="dgrid/Grid.js"></script><!--prova importazione Dgrid-->
<script src="js/initOptions.js"></script>
<script src="js/MobileACG.js"></script>

接下来我在 build_dojo.xml 中设置它:

<include name="dgrid/Grid.js" /> 

错误出现在下面的 require 行中:

function creaGridTableArticoli(){
    dgrid
    require(["dgrid/Grid"], function(Grid){
        var columns = {
            first: {
                label: "First Name"
            },
            last: {
                label: "Last Name"
            }
        };
        var grid = new Grid({ /* options here */ }, "grid");
        WL.Logger.debug("ok");

    });

}

Answer 1

注意:对于 Dojo，IBM Worklight 仅支持 IBM Dojo Toolkit 的运行时和工具。
IBM 相当于 dgrid is gridx .

也就是说，请按照以下步骤使 dgrid 在您的 Worklight 项目中运行。

1. Download dgrid
   • 解压缩，将文件夹重命名为“dgrid”
2. Download xstyle
   • 解压缩，将文件夹重命名为“xstyle”
3. Downlload put-selector
   • 解压缩，将文件夹重命名为“put-selector”
     
     

4. 在 Worklight 5.0.6 中

   • 创建一个新项目
   • 创建一个新应用程序并确保选中 Dojo 复选框以在关闭向导之前将 Dojo 添加到项目
   • 可以选择添加 Android 环境
   • 将上面的三个文件夹放置在属于该项目的 dojo 文件夹的根目录中:
     
     

   
   

5. 打开 build-dojo.xml 并添加以下内容:

   <include name="dojo/_base/declare.js"/>
   <include name="dojo/domReady.js"/>
   <include name="dgrid/**"/>
   <include name="put-selector/*"/>
   <include name="xstyle/**"/>
   

6. 打开 HTML 文件并在 HEAD 元素内添加新的脚本标记。使用以下代码填充它:

      require(["dgrid/Grid", "dojo/domReady!"], function(Grid) {
          var data = [
            { first: "Bob", last: "Barker", age: 89 },
            { first: "Vanna", last: "White", age: 55 },
            { first: "Pat", last: "Sajak", age: 65 }
          ];
   
          var grid = new Grid({
            columns: {
                first: "First Name",
                last: "Last Name",
                age: "Age"
            }
          }, "grid");
   
          grid.renderArray(data);
      });
   

7. 在 BODY 元素中添加以下内容:
   <div id="grid"></div>

8. 构建全部并部署

9. 在 Worklight 控制台中预览

   您还可以在 Eclipse 的设计透视图中进行预览，尽管我注意到表中存在一些渲染问题(在 MBS 中没有看到(如下)；我猜它可以在 CSS 中修复...)。

全尺寸图像:/image/B36qU.png