dojox DataGrid 不显示答案

【问题标题】：dojox DataGrid not displayingdojox DataGrid 不显示
【发布时间】：2012-08-17 14:24:49
【问题描述】：

我在 html 标记中声明了一个 contentPane/tabContainer。第三个选项卡包含一个 dojox.grid.DataGrid，默认情况下它是隐藏的。

findTask.execute 后，dataStore 被设置，dojox.grid.DataGrid 被填满，但是我无法让它显示。

这是一个 jsfiddle：

http://jsfiddle.net/dbecker88/BhNEa/2/

在 html 标记的底部，如果您删除“searchStatus”div 并重新运行 jsfiddle，结果显示正常。

有什么建议吗？

谢谢！

【问题讨论】：

标签： javascript dojo

【解决方案1】：

原因是，ContentPane 布局容器会评估是否存在单个子级或多个子级。它以不同的方式处理大小 - 并且会知道 'isSingleChild' 和 child == 小部件。如果它识别出一个小部件，它会调用它的 resize 函数。

要解决这个问题，您需要手动调用 resize - 使用包含网格的ContentPane 的尺寸。这是一种方法，通过标记

      <div id="searchCol" dojoType="dijit.layout.ContentPane" title="Find Results">


<script event="onShow" type="dojo/connect">
  // onShow connect is 1 ms too early to connect, adding 'whenIdle'
  setTimeout(function() {
    dijit.byId('grid').resize(
        dojo.getMarginBox('searchCol')
    );
  },1);
</script>



          <!--REMOVE the searchStatus element and the dataGrid displays? -->
          <div id="searchStatus"></div>
          <!--REMOVE the searchStatus element and the dataGrid displays? -->

          <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
                  <thead>
                    <tr>
                      <th field="PARCELID">Parcel ID</th>
                      <th field="OWNERNME1" >Owner 1</th>
                      <th field="OWNERNME2">Owner 2</th>
                      <th field="RESYRBLT ">Year Built</th>
                      <th field="SITEADDRESS" width="100%">Address</th>
                    </tr>
                  </thead>
                </table>

          <button id="clearSearch" dojoType="dijit.form.Button" type="button" onclick="clearSearchResults()" title="Clear Search Results" label="Clear Results"
                    iconClass="clearSearchBtn" style="position:absolute; bottom:7px;cursor:pointer; visibility:hidden"></button>
      </div>

当然，这将消耗完整大小，并且不会为按钮和搜索状态留下任何内容。你需要一个计算来做到这一点。类似于：

var size = dojo.getMarginBox('searchCol');
size.h = size.h 
   - dojo.getMarginBox(dojo.byId('searchStatus')).h
   - dojo.getMarginBox(dojo.byId('clearSearch')).h;
dijit.byId('grid').resize(size);

【讨论】：