0

我需要 在 dojo的TabContainer内使用BorderContainer 。我的要求是在我将创建的每个选项卡内有 3 个不同的窗格。因此，为此我尝试在 TabContainer 中使用 BorderContainer ，但它似乎不起作用。这是我正在尝试的。

A、B 和 C 是我要创建的选项卡。在其中我为每个选项卡使用ContentPane，然后使用 BorderContainer 为该特定选项卡指定左、中和右区域。

但它没有给我任何输出。请告诉我在这里做错了什么。

 <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'top'">
            <div data-dojo-type="dijit/layout/ContentPane" title="A" selected="true" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab A</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab A</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab A</div>
              </div>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="B" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab B</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab B</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab B</div>
              </div>
            </div>
           <div data-dojo-type="dijit/layout/ContentPane" title="C" selected="true" data-dojo-props="splitter:true">
              <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab C</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab C</div>
                 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab C</div>
              </div>
            </div>
   </div>
4

2 回答 2

1

您的声明性标记是正确的，但是由于我看不到您的其余代码，我猜您没有在 TabContainer、BorderContainer 和 ContentPane 上调用 require。Dojo 需要您先将它们引入，然后才能像您现在所做的那样以声明方式使用它们。所以你会在你的javascript中需要这个：

require([
  "dojo/parser",
  "dijit/layout/BorderContainer",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane"
]);

这是一个显示您的代码有效的笔，所以我会检查您是否正在使用 require 拉入这些模块。 http://codepen.io/kyledodge/pen/MwpMZm

要检查的另一件事是您的 dojoConfig 是否设置为 parseOnLoad：

dojoConfig = {
  parseOnLoad: true
};

如果没有，您要么需要设置它，要么需要 dojo/parser 并调用 parser.parse()。解析器是像您一样使用 data-dojo-type 属性的关键。以下是一些可能有用的信息：

http://dojotoolkit.org/reference-guide/1.10/dojo/parser.html

于 2015-06-05T06:41:08.207 回答
0

我没有确切的答案，但我想我可以确切地确定为什么什么都没有出现：边框容器似乎没有“填充”包含对象。我试图将一个边框容器放在另一个边框容器内，它的子节点存在，但似乎最终高度为零。显然，您必须明确设置边框容器的尺寸。

于 2016-05-27T21:29:41.120 回答