Dojo StackContainerがウィジェットを正しく表示しない

Question

私はDojo StackContainerを使用して、ウィジェットを正しく表示するようにしています。 は、ここに私の（道場のドキュメントで説明したように）HTML私のJSファイルで

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

ですが、私は次のコードを持っている：

：

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>