Tự động thay đổi kích thước dojo dijit.Grid widget khi thùng chứa cha mẹ đổi kích thước

Question

Tôi có tiện ích con dojo Grid bên trong một TitlePane với chiều rộng được đặt là 100%.

TitlePane có bố cục lỏng nên chiều rộng của nó thay đổi theo kích thước cửa sổ trình duyệt. Vấn đề tôi gặp phải là khi cửa sổ cha mở rộng (hoặc hợp đồng) bản thân lưới không thay đổi chiều rộng của nó. Tôi có thể làm cho nó tự thay đổi kích thước bằng cách gọi render() trên lưới, nhưng làm thế nào tôi có thể phát hiện cửa sổ cha đã thay đổi kích thước để tôi biết vẽ lại widget lưới?

Answer 1

Tôi đã phải làm điều này nhân dịp; nó không quá khó khăn:

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

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

Answer 2

Tôi có cùng một loại vấn đề. Tôi đã thử một giải pháp tương tự như của Ryan Corradini.

Chỉ hiển thị cho lần hiển thị đầu tiên. Nếu tôi thay đổi kích thước cửa sổ, chức năng thay đổi kích thước được gọi chính xác, nhưng kích thước của lưới vẫn không thay đổi.

Xin lưu ý các điều kiện cụ thể của tôi: trong chức năng thay đổi kích thước, tôi phải đặt thuộc tính chiều cao của lưới (chỉ thay đổi kích thước + cập nhật dường như không đủ).

HTML trông giống như:

<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 trông giống như:

... 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

Bạn chưa có thời gian để thử này ra cho bạn, nhưng có thể bạn không chỉ cần dojo.connect để thay đổi kích cỡ của TitlePane sự kiện và trong trình xử lý thay đổi kích thước lưới hoặc đặt kích thước của lưới bằng cách sử dụng tỷ lệ phần trăm trong khai báo/đánh dấu?

Answer 4

Bạn có thể thử với mã này:

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

Nếu bạn muốn trở thành một chút tổng quát hơn:

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

tham khảo: Dojo DataGrid height resize not working

Hy vọng nó sẽ làm việc cho bạn