Dojo StackContainer 无法正确显示小部件

Question

我正在使用 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 文档页面上提供的内容。

Answer 1

您错过了添加 dijit/layout/StackController，它会生成在内容窗格之间切换的按钮：

您需要做的是：

导入dijit/layout/StackController
为 StackController 创建一个 div：<div id="stackContolerDiv" ></div>
实例化你的控制器

您可以在下面的代码段中看到实时示例：

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>

Dojo StackContainer 无法正确显示小部件

Dojo StackContainer does not display widgets correctly

html

javascript

dojo

dijit.layout