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

时间:2009-05-15 18:37:42

标签: javascript dojo

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

TitlePane采用液体布局,因此宽度随浏览器窗口大小而变化。我遇到的问题是当父窗口扩展(或收缩)时,网格本身不会改变它的宽度。我可以通过在网格上调用render()来调整自身大小,但是如何检测父窗口已调整大小以便我知道重绘网格小部件?

4 个答案:

答案 0 :(得分:10)

我偶尔必须这样做;它并不太难:

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

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

答案 1 :(得分:1)

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

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

请注意我的特殊情况:在resize函数中,我必须设置网格的height属性(仅调整大小+更新似乎不够)。

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();
    }
}

答案 2 :(得分:1)

没有时间为你试试这个但你不能只是dojo.connect到TitlePane的resize事件和处理程序调整网格大小或使用声明/标记中的百分比设置网格的大小?

答案 3 :(得分:1)

您可以尝试使用以下代码:

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

希望它对你有用