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，这会生成在内容窗格之间切换的按钮：

你要做的是：

1. 导入dijit/layout/StackController

2. 为StackController创建一个div：<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>