Question

我正在尝试使用dojo1.7进行简单的布局工作。我想要的就是：

一个标题行，其中包含一系列链接和跨越整个页面的内容
一个页脚行，其中包含一堆链接和遍布整个页面的内容
左侧的侧面板，里面有一棵树
一个中央面板，里面有一些标签

我首先制作了所有小部件并将它们全部显示在同一页面上。在我开始使用布局之前，一切都按预期运行（相关代码包含在问题的末尾）

首先，区域设置似乎在很大程度上被忽略，标题应该在它的位置，页脚直接在它下面。其后面是布局的树和标签部分。这两个都是左对齐的。 Firebug告诉我'tree'没有区域设置（'tree'是包含树的div的id。）

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();
});

另一个奇怪的事情是我可以通过更改'tree'div来使页面的全部内容消失：

<div    
        id="tree_container"
        class="edgePanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'left', splitter: true">
        <div id="tree"></div>
</div>

Answer 1

您需要在以下代码段中将dojo/domReady!添加到要求中，我不会将内容窗格替换为带有树的左窗格。我将使用树设置左侧内容窗格的内容。

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();
});

我没有用于创建树的模型，但是您可以在

中看到其他所有内容的示例

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

Answer 2

有一些失踪的CSS。 dojo教程实际上并没有告诉你所有必要的css。我使用firebug来查看用于教程示例的css，之后修复问题很简单。

dojo1.7布局代理搞乱

2 个答案: