Использование BorderContainer внутри TabContainer в dojo

Question

Мне нужно использовать BorderContainer внутри TabContainer в Dojo. Мое требование - иметь 3 разные панели внутри каждой вкладки, которую я создам. Поэтому для этого я пытаюсь использовать BorderContainer внутри TabContainer, но, похоже, он не работает. Вот что я пытаюсь

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

Ваша декларативная разметка верна, но поскольку я не вижу остальной части вашего кода, я думаю, что вы не вызываете require для TabContainer, BorderContainer и ContentPane. Додзё нужно, чтобы вы принесли их, прежде чем использовать их декларативно, как вы это делаете. Так что вам нужно это в вашем 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(). Parser - ключ к использованию атрибута data-dojo-type, как вы делаете. Вот некоторая информация, которая может быть полезна:

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

Answer 2

У меня нет точного ответа, но я думаю, что могу точно определить, почему ничего не появляется: контейнер границы, кажется, не "заполняет" содержащий объект. Я пытаюсь поместить пограничный контейнер в другой пограничный контейнер, и его дочерние узлы присутствуют, но, похоже, заканчиваются нулевой высотой. По-видимому, вы должны явно установить размеры контейнера границы.