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）本身并通过Markup初始化DataGrid，但它也无法正常工作。

如果我遗失任何东西，请告诉我。

由于

Answer 1

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

widgetInTemplate : true

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

1）删除对

的调用

grid.startup();

2）使用 this

创建对象网格的类引用

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

3）当对象网格附加到DOM

时，调用方法启动

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

应该有效： - ）

Answer 2

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

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

2 个答案: