dojo1.7布局动作灵活 [英] dojo1.7 layout acting screwy
问题描述
我正在尝试使用dojo1.7进行简单的布局工作。很多我想要的是：
I'm trying to make a simple layout work using dojo1.7. Pretty much what I want is:
- 一个标题行，包含一大堆链接和跨越整个页面的东西
- 一个页脚排，一堆链接和东西跨越整个页面
- 左边的一个侧面板，里面有一棵树
- 一个中央面板，其中有一些选项卡
- a header row with a bunch of links and stuff that spans the entire page
- a footer row with a bunch of links and stuff that spans the entire page
- a side panel on the left with a tree in it
- a central panel with some tabs in it
我首先制作了所有的小部件，并将它们全部显示在同一页面上。在开始播放布局之前，一切都按预期行事（相关代码包含在问题的结尾）
I first made all the widgets and got them all displaying on the same page. Everything was behaving as expected before I started playing with the layout (the relevant code is included at the end of the question)
首先，区域设置似乎在很大程度上被忽略标题是它应该在哪里，页脚直接在它下面。后面是布局的树形和标签部分。这两个都保持一致。 Firebug告诉我，树没有区域设置（树是其中有树的div的id）。
Firstly, the region settings seem to be largely ignored, the header is where it should be, and the footer is directly under it. behind these are the tree and tabs portions of the layout. both of these are left aligned. Firebug is telling me that there is no region setting for 'tree' ('tree' is the id of the div that has the tree in it).
HTML
<body class="claro">
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'">
<div class="centerPanel"
data-dojo-type="dijit.layout.TabContainer"
data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.ContentPane" title="blah1" selected="true">
stuff
</div>
<div data-dojo-type="dijit.layout.ContentPane" title="blah2">
stuff
</div>
</div>
<div
id="tree"
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'left', splitter: true">
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'bottom'">
footer stuffs
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'top'">
heading stuffs
</div>
</div>
</body>
js：
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
require(["dijit/Tree"], function(Tree) {
tree = new Tree({ // create a tree
model: my_model_that_works
}, "tree"); // target HTML element's id
tree.startup();
});
另一个奇怪的是，我可以通过更改树来使页面的整个内容消失div看起来像：
Another weird thing is that i can make the entire contents of the page disappear by changing the 'tree' div to look like:
<div
id="tree_container"
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'left', splitter: true">
<div id="tree"></div>
</div>
推荐答案
有一些缺少的CSS。 dojo教程实际上并没有告诉你所有必要的CSS。我使用firebug来查看用于教程示例的css，之后修复问题是微不足道的。
There was some missing css. The dojo tutorials don't actually tell you about all the necessary css. I used firebug to view the css that was used for the tutorial examples after which fixing the problem was trivial.
这篇关于dojo1.7布局动作灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
