Dojo DataGrid 未在自定义小部件中填充数据

Question

我正在尝试从 Dojo 1.6 中的自定义小部件生成数据网格，但仅生成与 DataGrid 对应的 HTML，并且没有数据填充到网格中。

这是自定义小部件代码：-

 dojo.require("dojox.grid.DataGrid"); 
 dojo.require("dojo.parser");

 dojo.require("dijit._Widget"); 
 dojo.require("dijit._Templated");

 dojo.declare("FormGenerator", [dijit._Widget, dijit._Templated],   {

    widgetsInTemplate: true,

    templateString: dojo.cache("widget", "templates/dummyHTML.html"),

    postCreate : function(){
        this.inherited(arguments);

          layout =
                [
                    { name: 'Name', field: 'name', width: '100px' },
                    { name: 'Color', field: 'color', width: '100px' }
                ];
         dataStore = {
                    data :
                    {items :[
                    { name : 'John Doe', color: 'green' },
                    { name : 'Jane Doe', color: 'red' }
                    ],
                    label:'name',
                    identifier:'color'
                    }
                };
          var grid = new dojox.grid.DataGrid
            (
                {
                store: new dojo.data.ItemFileReadStore(window.dataStore),
                autoRender : true,
                structure: window.layout
                },
                "dummy" // this id should be there in HTML .
            );

          grid.startup();

    },

});

这是 dummyHTML.html 模板：-

 <div>
 <div id="dummy"></div>
 </div>

这个 HTML 是由上面的代码生成的：-

    <div id="formRequirement" widgetid="formRequirement">
    <div align="left" dojoattachevent="onmouseout:_mouseOut" role="grid" hidefocus="hidefocus" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="dummy" widgetid="dummy" aria-readonly="true" style="height: 0px; -moz-user-select: none;">
        <div role="presentation" dojoattachpoint="viewsHeaderNode" class="dojoxGridMasterHeader" style="display: none; height: 0px;"><div role="presentation" dojoattachpoint="headerNode" class="dojoxGridHeader" style="width: 1270px; left: 1px; top: 0pt;">
            <div role="presentation" style="width: 9000em;" dojoattachpoint="headerNodeContainer">
                <div role="row" dojoattachpoint="headerContentNode">
                              <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="dojoxGridRowTable">
                             <tbody><tr>
                                 <th dndtype="gridColumn_dummy" style="width: 100px;" idx="0" class="dojoxGridCell dojoDndItem " id="dummyHdr0" role="columnheader" aria-readonly="true" tabindex="-1">
                               <div class="dojoxGridSortNode">Name</div>
                                 </th>
                                 <th dndtype="gridColumn_dummy" style="width: 100px;" idx="1" class="dojoxGridCell dojoDndItem " id="dummyHdr1" role="columnheader" aria-readonly="true" tabindex="-1"><div class="dojoxGridSortNode">Color</div></th>
                            </tr>
                  </tbody>
               </table>
              </div>
        </div>
        </div></div>
        <div role="presentation" dojoattachpoint="viewsNode" class="dojoxGridMasterView"><div role="presentation" class="dojoxGridView" id="dojox_grid__View_1" widgetid="dojox_grid__View_1" style="width: 1270px; height: 0px; left: 1px; top: 0px;">

        <input type="checkbox" role="presentation" dojoattachpoint="hiddenFocusNode" class="dojoxGridHiddenFocus">
        <input type="checkbox" role="presentation" class="dojoxGridHiddenFocus">
        <div role="presentation" dojoattachpoint="scrollboxNode" class="dojoxGridScrollbox" style="height: 0px;">
            <div role="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" class="dojoxGridContent" style="height: 64px; width: 1255px;"></div>
        </div>
    </div></div>
        <div dojoattachpoint="messagesNode" style="display: none;" class="dojoxGridMasterMessages"></div>
        <span tabindex="0" dojoattachpoint="lastFocusNode"></span>
    </div>
</div>

您可以看到上面的代码没有填充任何数据。您还可以看到我已将 layout 和 dataStore 作为全局变量但没有成功。即使我尝试将 DataGrid 放入模板文件（dummyHTML.html）本身并通过标记初始化 DataGrid，但它也无法正常工作。

如果我遗漏了什么，请告诉我。

谢谢

Answer 1

首先，因为 dojox.grid.Datagrid 本身就是一个 Widget，所以您应该在您的自定义小部件类中将属性“widgetInTemplate”设置为 true。

widgetInTemplate : true 

其次，当网格尚未附加到 DOM 时，不应从网格中调用方法“启动”。 “postCreate”方法在与 DOM 断开连接时呈现小部件。这不是 dojox.grid.Datagrid 应该设置的方式。实际上，dojox.grid.Datagrid 会在将其放入 DOM 后计算出它的大小。通过执行以下操作：

1) 删除对

的调用

grid.startup(); 

2) 使用 this

创建对对象网格的类引用

this.grid = new dojox.grid.DataGrid
...

3) 当对象网格附加到 DOM 时，在引用对象网格时调用方法 startup

var yourForm = new FormGenerator();
yourForm.placeAt("container");
yourForm.startup();

它应该可以工作:-)

Answer 2

您需要指定高度和宽度。没有它们，您的网格将仅呈现标题。