Dojo網格在div中不起作用

Question

將<div id="grid1"></div>放在<div></div>會使它消失。

在下面的簡單代碼中，Datagrid的表現非常好，直到被包含在一個額外的div中為止。

這有效：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script>
require([
    "dojo/store/Memory",
    "dojo/data/ObjectStore",
    "dojox/grid/DataGrid",
    "dojo/domReady!"
], function(Memory, ObjectStore, DataGrid){
    data = [
        { abbr:'ec', name:'Ecuador', capital:'Quito' },
        { abbr:'ec1', name:'Ecuador1', capital:'Quito1' }
    ];
    var objectStore = new Memory({
        data: data
    });
    grid = new DataGrid({
        store: ObjectStore({objectStore: objectStore}),
        structure: [
            {name:"Country", field:"name", width: "150px"},
            {name:"Abbreviation", field:"abbr"},
            {name:"Capital", field:"capital"}
        ]
    }, "grid1");
    grid.startup();
});
</script>
</head>
<body class="claro">
before
<div id="grid1"></div>
after
</body>
</html>

這不起作用：

http://jsfiddle.net/ssMG4/

<body class="claro">
before
<div>
  <div id="grid1"></div>
</div>
after
</body>

它適用於dojo v1.8、1.9甚至1.6。

我究竟做錯了什么？

Answer 1

解決了這個問題！

http://jsfiddle.net/pfvEa/1/

我要做的就是添加這些代碼行

#grid1
{
    height: 20em;
}

（由ahatchkins 更新）為什么有此必要。 從文檔引用：

這樣做的主要原因是網格本身的“動態”性質。 網格需要先布局好自己，然后再獲取任何數據-因此它沒有辦法“知道”繪制列的寬度-因為我們沒有數據。 根據瀏覽器的不同，我們可以做出“最佳猜測”-但並非在所有情況下都有效。

Dojo網格在div中不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2013-06-07 10:10:33

Dojo網格在div中不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2013-06-07 10:10:33

解決方案1
1 已采納 2013-06-07 10:10:33