Dojo (1.9.1) datagrid does not render if not a direct child of body

问题

I have problems with rendering a datagrid in my custom widget.

I was able to pinpoint the problem to this: datagrids that are not a direct child of the body do do not render correctly.

Showcase:

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

Is there a way to make this work? Should I log it somewhere ?

I originally posted my question here: dojo stackcontainer contains custom widget that uses datagrid, but dategrid not showing up but then I didn't know that it was caused by the fact that a datagrid should be a direct child of the body.

回答1:

Grid need a parent height. Is documented somewhere.

Set a height for inner Div parent will do the magic.

This is just so happen the parent for outter div is body.

来源：https://stackoverflow.com/questions/18437636/dojo-1-9-1-datagrid-does-not-render-if-not-a-direct-child-of-body

标签

dojo

dojox.grid