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>