同封 <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>
これはうまくいかない：
<body class="claro">
before
<div>
<div id="grid1"></div>
</div>
after
</body>
これはdojo v1.8、1.9、さらには1.6にも適用されます。
私は間違って何をしていますか？
回答：
回答№1は1問題を修正しました！
私がしなければならなかったのはこれらのコード行を追加することだけでした
#grid1
{
height: 20em;
}
更新 なぜこれが必要なのかについて（ahatchkinsによる）ドキュメントから引用：
これの主な理由は「動的な」性質ですグリッド自体の。 グリッドはデータを取得する前にレイアウトを開始する必要があります。 それは列を描画する幅を「知る」ための方法を持っていません - データがないからです。ブラウザによっては、できます しかし、それはすべての状況でうまくいくわけではありません。