{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《dojo1.7 layout acting screwy》','https://www.manongdao.com/q-1014966.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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)
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();
});
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>
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.
You need to add
dojo/domReady!to the requires in the following snippet and I would not replace the content pane taht is the left pane with the tree. I would set the content of the left content pane with the tree.I don't have the model to create the tree, but you see an example with everything else at
http://jsfiddle.net/cswing/3AdMg/