自定义小部件中的 dojo 数据网格未呈现答案

【问题标题】：dojo data grid in custom widget is not rendering自定义小部件中的 dojo 数据网格未呈现
【发布时间】：2014-12-18 16:09:38
【问题描述】：

大家好，我已经创建了一个自定义小部件，它在未来将包含多个数据网格，但是我在尝试让数据网格呈现时遇到了相当大的困难。

我没有错误，并且我怀疑以下所有内容似乎都被调用了；也许这是一个异步问题？

对此的任何帮助都会很棒，我的代码如下。

AssetGridWidget.js

define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/AssetGridWidget.html",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/store/Memory", 
"dojo/data/ObjectStore"]
, function(declare, baseFx, lang, domStyle, mouse, on, _WidgetBase, _TemplatedMixin, template,      DataGrid,ifilereadstore, Memory, ObjectStore){
return declare([_WidgetBase, _TemplatedMixin], {
    widgetInTemplate : true,
    templateString: template,

postCreate: function(){

     this.layout =
            [
                { name: 'Name', field: 'name', width: '100px' },
                { name: 'Color', field: 'color', width: '100px' }
            ];
     this.data = {
                data :
                {items :[
                { name : 'John Doe', color: 'green' },
                { name : 'Jane Doe', color: 'red' }
                ],
                label:'name',
                identifier:'color'
                }
            };

            this._employeeStore = new Memory({data: this.data, idProperty: "name"});
            this._dataStore = ObjectStore({objectStore: this._employeeStore});
      this.grid = new DataGrid
        (
            {
            noDataMessage: "Hazza",
            store: this._dataStore,
             query: { id: "*" },
            autoRender : true,
            structure: this.layout
            },
            "grid" 
        );
    this.inherited(arguments);

},

startup: function() {
            this.grid.startup();
        }

});
});

我的模板如下：

AssetGrididget.html

<div>

    <div data-dojo-attach-point="grid" style="width: 800px; height: 800px;"></div>

</div>

最后是我调用它的页面

索引.html

<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>

<body>

<div id="gridContainer" style="width: 300px; height: 300px;"></div>

<script>
require(["dojo/request", "dojo/dom", "dojo/_base/array", "tartarus/widget/AssetGridWidget", "dojo/domReady!"],
function(request, dom, arrayUtil, AssetGridWidget){

 var gridly = new AssetGridWidget();
 gridly.placeAt("gridContainer");
 gridly.startup();
});
</script>

</body>

为此，我一直在用头撞砖墙好几个小时，因此非常感谢您的帮助！

【问题讨论】：

您是否尝试在 dom 中搜索以查看是否正在呈现任何内容，如果是，正在呈现什么？？
正在创建以下 dom：

标签： javascript dojo widget

【解决方案1】：

您将"grid" 作为第二个参数传递给DataGrid 构造函数。这将尝试在文档中查找 ID 为 grid 的 DOM 节点并将其替换为网格。

但是，根据您的模板，您实际上打算要做的是将grid 附加点替换为网格。而不是"grid"，构造函数的第二个参数应该是this.grid。

（我可能还建议将附加点命名为gridNode 以区分它，因为此后您会立即将实际的网格实例分配给this.grid。）

【讨论】：