dojo1.7 layout acting screwy

问题

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>

回答1:

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.

require(["dijit/Tree", "dojo/domReady!"], function(Tree) {
  tree = new Tree({ // create a tree
    model: my_model_that_works 
  });
  dijit.byId("tree").set('content', tree);
  tree.startup();
});

I don't have the model to create the tree, but you see an example with everything else at

http://jsfiddle.net/cswing/3AdMg/

回答2:

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.

来源：https://stackoverflow.com/questions/11248427/dojo1-7-layout-acting-screwy

标签

layout

dojo