Automatically Resize dojo dijit.Grid widget when it's parent container resizes

问题

I have a dojo Grid widget inside a TitlePane with it's width set to 100%.

The TitlePane is in a liquid layout so it's width changes with the browser window size. The problem I am having is that when the parent window expands (or contracts) the grid itself does not change it's width. I can get it to resize itself by calling render() on the grid, but how can I detect that the parent window has resized so that I know to redraw the grid widget?

回答1:

I've had to do this on occasion; it's not too tough:

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

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

回答2:

I have the same kind of problem. I tried a solution similar to Ryan Corradini's.

It is only OK for first display. If I change the window size, the resize function is correctly called, but the grid's size stays unchanged.

Please note my particular conditions: in the resize function, I have to set the height attribute of the grid (resize+update only seems not enough).

HTML looks like :

<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 looks like :

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

回答3:

Haven't got time to try this out for you but can't you just dojo.connect to the TitlePane's resize event and in the handler resize the grid or set the size of the grid using percentages in the declaration/markup?

回答4:

You can try with this code:

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

If you want to be a bit more general:

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

refer to: Dojo DataGrid height resize not working

Hope it work for you

来源：https://stackoverflow.com/questions/870199/automatically-resize-dojo-dijit-grid-widget-when-its-parent-container-resizes

标签

javascript

dojo