このDojoスニペットはなぜ機能しませんか？

Question

BorderContainerにdivを挿入しようとすると、ページが読み込まれません。何が起こっている？私は間違って何をしていますか？

私がバナー行をコメントアウトすると、ボーダーコンテナがうまく読み込まれます。私がdivを入れると、ページはもはや読み込まれなくなります。

Answer 1

あなたはtopがContentPaneAPIとして定義しています。 domNodeとしてBanner。したがって、domNodeを設定するには、コンテンツを設定する必要があります。

top.set('content', banner); 

あなたはそれがDOMだ追加する必要があるコンテンツページに（コードではなく、HTMLとしてこれらを考える）ウィジェットを追加したい場合。

top.set('content', bannerWidget.domNode); 

または

bannerWidget.startup(); 
top.addChild(bannerWidget); 

あなたはそれがサブクラス化する必要がありウィジェットdijitの/ _WidgetBaseを渡し、あなたはそれに起動を呼び出す必要があります。

ペインごとに1つのウィジェットを使用することをお勧めします。私は複数のウィジェットを1つのウィジェットにまとめています。

Answer 2

実際にHTMLコンテンツを挿入するだけでよいので、正しい方法はdenovとManjunathaの説明にある 'content'属性を使用することです。

Manjunathaが言ったように、あなたはdomConstructの部分が必要ではなく、おそらくdivではないかもしれません。最後に、インスタンス化文でコンテンツを提供できるので、コンパクトな形式は：var top = new ContentPane({..., content: title});です。

次に、top.addChild（aWidget）を使用してウィジェットを追加できます。たとえば、メニューバーの場合、コンテンツ（タイトル）の下に表示されます。しかし、ウィジェットは、ウィジェットでなければならず、バナーはウィジェットではありません。

Answer 3

これを見てくださいjsfiddle最初、ペインのコンテンツはfooです！バー！ボタンのクリック時に内容がボタンに変更されます

**

• HTML

"をクリックして" **

<div id="target"></div> 
<div id="click"> 

</div> 

**

• JSコード

**

dojo.require("dijit.layout.BorderContainer"); 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.form.Button"); 

dojo.ready(function() { 
    var bc = new dijit.layout.BorderContainer({ 
     'class': 'theBorderContainer' 
    }, 'target'); 

    var p1 = new dijit.layout.ContentPane({ 
     region: 'center', 
     content: '<p>foo! bar!</p>' 
    }); 
    var p2 = new dijit.layout.ContentPane({ 
     region: 'top', 
     content: '<p>top!</p>' 
    }); 

    var btn = new dijit.form.Button({ 
    name:"button", 
    title:"Hello", 
    label:"Hello" 
    }); 

    var btn1 = new dijit.form.Button({ 
    name:"click", 
    title:"Click", 
    label:"Click", 
    onClick:function(evt){ 
    p1.set('content',btn); 
    } 
    },click); 


    bc.startup(); 

    bc.addChild(p1); 
    bc.addChild(p2); 
    p1.startup(); 
}); 

**

• CSSコード

**

body, html { 
    width: 100%; 
    height: 100%; 
} 
.theBorderContainer{ 
    width: 100%; 
    height: 90%; 
}