如果不是body的直接子代，则Dojo(1.9.1)datagrid不会呈现 [英] 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.
展示:
<!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"> </div>
<div><div id="inner"> </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 ?
我最初在这里发布我的问题: dojo stackcontainer包含使用datagrid的自定义小部件，但是dategrid没有显示 但是我不知道这是由于数据网格应该是人体的直接子实体而造成的.
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.
推荐答案
网格需要父级高度.记录在某处.
Grid need a parent height. Is documented somewhere.
设置内部Div父级的高度会起到神奇作用.
Set a height for inner Div parent will do the magic.
这种情况恰好发生于外部div的父项是body.
This is just so happen the parent for outter div is body.
这篇关于如果不是body的直接子代，则Dojo(1.9.1)datagrid不会呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
