Question

我一直在努力创建一个包含使用dojo的dgrid的简单模板化小部件。这是my code in plunker：

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
  <div id="myContainer"></div>
  <script type="text/javascript">
    var dojoConfig = {
      async: true,
      parseOnLoad: true,
      packages: [{
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
      }, {
        name: 'myApp',
        location: window.location.href.replace(/\/$/, "")
      }]
    }
  </script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"></script>
  <script type="text/javascript">
    require(["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
      var widget = new MyWidget.placeAt(myContainer);
    });
  </script>
</body>
</html>

SimpleTemplatedGridWidget.js

define([
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (registry, declare, Grid, DijitRegistry, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {

        data : [
            { first: 'Bob', last: 'Barker', age: 89 },
            { first: 'Vanna', last: 'White', age: 55 },
            { first: 'Pat', last: 'Sajak', age: 65 }
        ],

        columns : {
            first: 'First Name',
            last: 'Last Name',
            age: 'Age'
        },

        CustomGrid : declare([Grid, DijitRegistry]),

        postCreate: function() {
            myGrid = new CustomGrid({
                columns: columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(data);
            myGrid.startup();
        }       
    });
});

SimpleTemplate.html

<div data-dojo-attach-point='AttachGrid'></div>

我看到错误，我无法在本地和plunker解密。我可能会缺少什么？

Answer 1

您的代码中存在严重错误，一些是javascript基础知识，另一些是dojo。

您的代码

LIMIT

应

var widget = new MyWidget.placeAt(myContainer);

另外，var widget = new MyWidget().placeAt(myContainer);令人困惑，我建议您使用已包含的myContainer

dojo/dom

现在，关于您的小部件，您的小部件正在扩展var widget = new MyWidget().placeAt(dom.byId('myContainer'));但不包括在内，所以

_WidgetBase

扩展define([ "dijit/registry", "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry", "dijit/_WidgetBase", //You are missing this module "dijit/_TemplatedMixin", "dojo/text!./SimpleTemplate.html" ], function ( registry, declare, Grid, DijitRegistry, _WidgetBase, //Also include it here _TemplatedMixin, template ) {时，我们需要定义_TemplatedMixin应该是加载templateString的模板或静态模板

dojo/text!....

现在，你的return declare([_WidgetBase, _TemplatedMixin], { templateString: template, //need to add函数正在引用很多未定义的变量，它们会查找你的代码，我假设你想要得到小部件本身的属性，所以

postCreate

请注意，我在postCreate: function() { myGrid = new this.CustomGrid({ columns: this.columns, idProperty: "id" }, this.AttachGrid); myGrid.renderArray(this.data); myGrid.startup(); }，this.和columns前面添加了data;

此更改解决了您的大多数问题，只剩下一个抱怨我通过移除CustomGrid模块解决的already registered widget，因为我不知道它的用途和用途。< / p>

我建议你一些链接：

Creating Template-based Widgets
Understanding _WidgetBase

希望有所帮助

Dojo小部件显示dgrid

1 个答案: