Dojo小部件显示dgrid

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

的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>

我看到错误，我无法辨认本地和在抢劫。我可能会错过什么？

来源

2016-08-19 Naci

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

您的代码

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我们需要定义应该是一个模板加载dojo/text!....或静态模板的templateString，在你的情况现在

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(); 
     }

请注意，我在columns，data和CustomGrid前添加this.;

这个变化解决了大部分问题，只剩下一个抱怨already registered widget，我通过删除DijitRegistry模块解决了这个问题，因为我不知道它的作用和用途。

我建议你一些链接：

Creating Template-based Widgets
Understanding _WidgetBase

希望它可以帮助

来源

2016-08-19 21:34:40

非常感谢卡斯特罗！你碰巧做了那些编辑并使其工作？不幸的是，我试图组织重块，结果删除了代码而没有注意到你的答案。我重新创建了代码并进行了修改，并在我的问题中编辑了链接。但它仍然给我一个空的页面，我得到404错误为 – Naci

你得到的404是因为'dgrid'需要一些软件包作为'put-selector/put'和'xstyle/has-class'并且正在尝试从错误的位置获取它们，或者更新到最新版本的'dgrid' v1.1.0'，或者你需要调整你的'dojoConfig'，这样你就可以从正确的位置加载这个模块 –

看看这个闯关者]（http://plnkr.co/edit/jRz36GkKbluxvQ6bjldr?p=preview）这是你的代码，但只是'dgrid'版本设置为'v1.1.0'，它可以正常工作:-) –

Dojo小部件显示dgrid

回答

相关问题