0

カスタム ウィジェットでのデータグリッドのレンダリングに問題があります。

私はこれに問題を突き止めることができました: 本体の直接の子ではないデータグリッドは正しくレンダリングされません。

ショーケース:

<!DOCTYPE html>
<html>
<head>
    <title>Problems with datagrid</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">

<div id="outer">&nbsp;</div>
<div><div id="inner">&nbsp;</div></div>

<script>
    dojoConfig = {
        isDebug: true,
        async:   true,
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        }
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
    require([
        "dojo/parser",
        "dojo/ready",
        "dojo/store/Memory",
        "dojo/data/ObjectStore",
        "dojox/grid/DataGrid"
    ], function(parser, ready, Memory, ObjectStore, DataGrid){

        createOuterGrid = function(){
            var data = [{id:12,name:'outer'},{id:13,name:'blabla'}];
            var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
            var grid = new DataGrid({
                store:dataStore,
                items:data,
                structure:[
                    {name:"ID", field:"id", width:"20%"},
                    {name:"Name", field:"name", width:"80%"}
                ]
            }, "outer");
            grid.startup();
        };
        createInnerGrid = function(){
            var data = [{id:12,name:'inner'},{id:13,name:'blabla'}];
            var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
            var grid = new DataGrid({
                store:dataStore,
                items:data,
                structure:[
                    {name:"ID", field:"id", width:"20%"},
                    {name:"Name", field:"name", width:"80%"}
                ]
            }, "inner");
            grid.startup();
        };

        parser.parse();
        ready(function(){
            createOuterGrid();
            createInnerGrid();
        });
    });
</script>
</body>
</html>

これを機能させる方法はありますか？どこかに記録する必要がありますか？

私は最初に質問をここに投稿しました: dojo stackcontainer には datagrid を使用するカスタム ウィジェットが含まれていますが、dategrid が表示されませんが、datagrid が body の直接の子である必要があるという事実が原因であることを知りませんでした。

4

1 に答える 1

0

グリッドには親の高さが必要です。どこかに文書化されています。

内側の Div の親の高さを設定すると、魔法がかかります。

これは、outter div の親が body であるためです。

于 2013-08-26T20:04:50.790 に答える