Dojo StackContainer неправильно отображает виджеты

Я использую Dojo StackContainer, чтобы правильно отображать пару виджетов. Вот мой HTML (как описано в документации Dojo)

<div id="scontainer-prog"></div>

В моем файле JS у меня есть следующий код:

require([
    "dijit/layout/StackContainer",
    "dijit/layout/ContentPane",        
    "dojo/domReady!"
], function(StackContainer, ContentPane){
    var sc = new StackContainer({
        style: "height: 300px; width: 400px;",
        id: "myProgStackContainer"
    }, "scontainer-prog");

    var cp1 = new ContentPane({
        title: "page 1",
        content: "page 1 content"
    });
    sc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "page 2",
        content: "page 2 content"
    });
    sc.addChild(cp2);

    sc.startup();
});

Однако страница выглядит следующим образом:

введите здесь описание изображения

Любая идея о том, что я делаю неправильно? Этот пример аналогичен приведенному на странице документации Dojo StackContainer.


javascript html dojo dijit.layout
person NCoder    schedule 21.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пропустили добавление dijit/layout/StackController, которое генерирует кнопки для переключения между панелями содержимого:

Что вам нужно сделать, это:

  1. импортировать dijit/layout/StackController

  2. Создайте div для StackController: <div id="stackContolerDiv" ></div>

  3. Создайте экземпляр контроллера

Вы можете увидеть живой пример ниже:

require([
    "dijit/layout/StackContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/StackController",
    "dojo/domReady!"
], function(StackContainer, ContentPane, StackController){
    var sc = new StackContainer({
        style: "height: 150px; width: 400px;",
        id: "myProgStackContainer"
    }, "scontainer-prog");

    var cp1 = new ContentPane({
        title: "p1",
        content: "page 1 content"
    });
    sc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "p2",
        content: "page 2 content 2 content"
    });
    sc.addChild(cp2);

    var cp3 = new ContentPane({
        title: "p3",
        content: "page 3 content 3 content content 3"
    });
    sc.addChild(cp3);
    
    var controller = new StackController({containerId: "myProgStackContainer"}, "stackControllerDiv");

    sc.startup();
    controller.startup();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>

<div class="claro">
  <div id="scontainer-prog"></div>
  <div id="stackControllerDiv"></div>
</div>

person Spring    schedule 22.04.2017
comment
NCoder Если это помогло вам, пожалуйста, отметьте ответ как решенный ✓ (оставил ответ) (как на этом изображении => пост разрешения изображения ) спасибо - person Spring; 24.04.2017