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

时间:2014-12-18 16:09:39

标签: javascript dojo widget

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

我没有错误,所有以下内容似乎都被调用,因为我怀疑;也许这是一个异步问题?

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

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>

最后我从

调用它的页面

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

我一直在砖墙上砸了几个小时,所以任何帮助都非常感谢!

1 个答案:

答案 0 :(得分:2)

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

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

(我可能还建议命名附加点gridNode来区分它,因为此后你立即将实际网格实例分配给this.grid。)