1

<div id="grid1"></div>中に入れる<div></div>と消えます。

以下の単純なコードでは、追加の div で囲まれるまで、Datagrid は完全に適切に動作します。

これは機能します：

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>

これは機能しません:

http://jsfiddle.net/ssMG4/

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

Dojo v1.8、1.9、さらには 1.6 にも適用されます。

私は何を間違っていますか？

4

1 に答える 1

1

問題を修正しました。

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

私がしなければならなかったのは、これらのコード行を追加することだけでした

#grid1
{
    height: 20em;
}

これが必要な理由について (ahatchkins による)更新します。ドキュメントからの引用：

これの主な理由は、グリッド自体の「動的」な性質です。グリッドは、データを取得する前にレイアウトを開始する必要があります。データがないため、列を描画する幅を「知る」方法がありません。ブラウザによっては、「最善の推測」を行うことができますが、すべての状況で機能するとは限りません。

于 2013-06-07T10:10:33.477 に答える