当它的父容器调整大小时自动调整 dojo dijit.Grid 小部件的大小答案

【问题标题】：Automatically Resize dojo dijit.Grid widget when it's parent container resizes当它的父容器调整大小时自动调整 dojo dijit.Grid 小部件的大小
【发布时间】：2010-10-26 14:13:43
【问题描述】：

我在 TitlePane 中有一个 dojo Grid 小部件，它的宽度设置为 100%。

TitlePane 处于流动布局中，因此它的宽度会随着浏览器窗口的大小而变化。我遇到的问题是，当父窗口扩展（或收缩）时，网格本身不会改变它的宽度。我可以通过在网格上调用 render() 来让它自己调整大小，但是如何检测到父窗口已经调整大小以便我知道要重绘网格小部件？

【问题讨论】：

标签： javascript dojo

【解决方案1】：

我有时不得不这样做；这不是太难：

function resizeGrid() {
   // do whatever you need here, e.g.:
   myGrid.resize();
   myGrid.update();
}

dojo.addOnLoad(function() {
   dojo.connect(window, "onresize", resizeGrid);
});

【讨论】：

【解决方案2】：

我也有同样的问题。我尝试了类似于 Ryan Corradini 的解决方案。

只有第一次显示是可以的。如果我改变窗口大小，resize 函数会被正确调用，但网格的大小保持不变。

请注意我的特殊条件：在resize函数中，我必须设置网格的height属性（resize+update似乎不够）。

HTML 看起来像：

<div id="msgItems" dojoType="dijit.layout.ContentPane" region="center"
 style="padding:2px;">
<form id="msgDefForm" name="msgDefForm" dojoType="dijit.form.Form">
<div style="display:none;"><input type="text" name="msgName" id="msgName" dojoType="dijit.form.TextBox"></input>
</div>

<table dojoType="dojox.grid.DataGrid" jsId="msgGrid" id="msgGrid"
rowsPerPage="10" rowSelector="5px" singleClickEdit="false" loadingMessage="Loading message content"  
errorMessage="Error while loading the message content" selectable="true"  >
  <thead>
    <tr>
      <th field="zone" width="8em" cellType="dojox.grid.cells.Select" options="properties, values" editable="true">Zone</th>
      <th field="property" width="auto" editable="true">Property</th>
      <th field="value" width="auto" editable="true">Value</th>
    </tr>
  </thead>
</table>

</form>
</div>

JS 看起来像：

... in startOnLoad :
dojo.connect( window, "onresize", msgGridResized);
msgGridResized ();
...

function msgGridResized () {
    var cont = dojo.byId("msgItems")
    var h = cont.clientHeight - 4;
    if (h >= 0){
        var grd = dijit.byId("msgGrid");
        grd.attr("height", h+"px" );
        grd.resize();
        grd.update();
    }
}

【讨论】：

好的！我找到了：“form”标签似乎干扰了布局计算。我只是把它拿出来，并相应地更改我的代码，以便不需要隐藏的输入字段，现在可以了。

【解决方案3】：

还没有时间为您尝试，但您不能直接 dojo.connect 到 TitlePane 的调整大小事件并在处理程序中调整网格大小或使用声明/标记中的百分比设置网格大小吗？

【讨论】：

【解决方案4】：

你可以试试这段代码：

grid.resize({ w: 400, h: 400 });

如果你想更笼统一点：

var parentDiv = dom.byId('parentDiv');
grid.resize({ w: parentDiv.clientWidth, h: parentDiv.clientHeight });

参考：Dojo DataGrid height resize not working

希望对你有用

【讨论】：