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>

它适用于道场v1.8,1.9甚至1.6。

我做错了什么？

Answer 1

修正了问题！

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

我所要做的就是添加这些代码行

#grid1
{
    height: 20em;
}

更新（由ahatchkins提供），说明为什么这是必要的。从文档引用：

主要原因是网格本身的“动态”特性。网格需要在它有任何数据之前开始自我铺设 - 所以它没有办法“知道”绘制列的宽度 - 因为我们没有这些数据。根据浏览器的不同，我们可以做出“最好的猜测” - 但它并不适用于所有情况。

dojo网格在div中不起作用

1 个答案: