Ridimensiona automaticamente il widget dojo dijit.Grid quando il contenitore padre si ridimensiona

Question

Ho un widget Griglia dojo all'interno di un TitlePane con la larghezza impostata su 100%.

Il TitlePane si trova in un layout liquido in modo che la larghezza cambi con le dimensioni della finestra del browser. Il problema che sto avendo è che quando la finestra genitore si espande (o contrae) la griglia stessa non cambia la sua larghezza. Posso farlo ridimensionare richiamando render() sulla griglia, ma come posso rilevare che la finestra genitore è stata ridimensionata in modo che sappia ridisegnare il widget della griglia?

Answer 1

Ho dovuto farlo occasionalmente; non è troppo difficile:

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

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

Answer 2

Ho lo stesso tipo di problema. Ho provato una soluzione simile a quella di Ryan Corradini.

È solo OK per il primo display. Se cambio la dimensione della finestra, la funzione di ridimensionamento viene chiamata correttamente, ma la dimensione della griglia rimane invariata.

Si prega di notare le mie condizioni particolari: nella funzione di ridimensionamento, devo impostare l'attributo altezza della griglia (il ridimensionamento + aggiornamento non sembra sufficiente).

HTML assomiglia:

<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 assomiglia:

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

Answer 3

non ho tempo di provare questo per voi, ma non si può semplicemente dojo.connect al ridimensionamento del TitlePane evento e nel gestore ridimensionare la griglia o impostare la dimensione della griglia utilizzando le percentuali nella dichiarazione/markup?

Answer 4

Si può provare con questo codice:

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

Se si vuole essere un po 'più generale:

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

si riferiscono a: Dojo DataGrid height resize not working

Spero che funziona per voi