Question

我需要在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>

Answer 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

Answer 2

我没有完全得到答案，但我想我可以确切地说明为什么没有出现：边框容器似乎没有＆＃34;填充＆＃34;包含对象。我试图将边框容器放在另一个边框容器中，并且其子节点存在但似乎最终没有高度。显然你必须明确设置边框容器的尺寸。

在dojo中使用TabContainer中的BorderContainer

2 个答案: