0

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

  1. 一个标题行，包含一堆跨越整个页面的链接和内容
  2. 一个页脚行，包含一堆跨越整个页面的链接和内容
  3. 左侧的侧面板，里面有一棵树
  4. 一个带有一些标签的中央面板

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

首先，区域设置似乎在很大程度上被忽略了，页眉在它应该在的位置，而页脚在它的正下方。这些后面是布局的树和选项卡部分。这两个都是左对齐的。Firebug 告诉我“树”没有区域设置（“树”是其中包含树的 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();
});

另一个奇怪的事情是，我可以通过将“树”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>
4

2 回答 2

0

您需要添加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/

于 2012-06-28T17:21:36.747 回答
0

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

于 2012-06-29T14:29:32.087 回答