1

Enclosing <div id="grid1"></div> inside <div></div> makes it disappear.

In the simple code below Datagrid behaves perfectly well until enclosed in an extra div.

This works:

http://jsfiddle.net/pfvEa/

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

This doesn't work:

http://jsfiddle.net/ssMG4/

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

It applies to dojo v1.8, 1.9 and even 1.6.

What am I doing wrong?

4

1 回答 1

1

修复了问题！

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

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

#grid1
{
    height: 20em;
}

更新 （通过 ahatchkins）为什么这是必要的。从文档中引用：

主要原因是网格本身的“动态”特性。网格需要在它有任何数据之前开始布局——所以它没有办法“知道”绘制列的宽度——因为我们没有数据。根据浏览器的不同，我们可以做出“最佳猜测”——但并非在所有情况下都有效。

于 2013-06-07T10:10:33.477 回答