Dojoレイアウト - パネル内の2つのパネル

Question

私はちょうど評価練習のためにdojoを学習し始めました（私たちはそれを職場で使用しているかもしれません）。プロジェクトのタイムスケールは、おそらく私がこれを最初から学ぶことを許さないので、深いところで飛び降りています。誰かが私を正しい方向に向けることができるかどうか疑問に思っていた。

以下のコードは、チュートリアルのページを表しています。見えるように意図しているもの

​​

^^。

私はそれを実現しましたが、2つのパネルを中央のセクションにしたいと思います：上のプレーンなコンテンツパネルとその下のタブパネル。以下のコードは、私がこれを達成する方法を表しています。私が探しているのは、コンテンツペイン（「Hello world」が入っているもの）をコメントアウトすると、親コンテンツペインを「引き継ぎ」、タブパネルも表示されなくなるということです。コメントを外して、私のタブを元に戻します。

これを行う方法の良い例の方向で私を指摘できる人は誰ですか？あなたがデザインの巣（代わりにタブコンテナの）あなたの中央のcontentPane内部の第二のBorderContainerを、=見出しでき

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" 
    data-dojo-props="design: 'headline'"> 

    <div class = "centrePanel" 
     data-dojo-type="dijit.layout.ContentPane" 
     data-dojo-props="region: 'center'"> 

      <%-- I want to uncomment this bit!! 
      <div 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region: 'top'"> 
        Hello World      
      </div> 
      --%> 

      <div 
       data-dojo-type="dijit.layout.TabContainer" 
       data-dojo-props="region: 'center'"> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
       </asp:ContentPlaceHolder>      
      </div>     



    </div>   
    <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div> 
    <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div> 
</div> 

Answer 1

。 次に、内部境界コンテナの上部セクションにContentPaneを配置し、中央のTabContainerに下部コンテナを配置できます。

この素晴らしいツールを使用して、適切なレイアウト生成を助けることがあります。http://maqetta.org:55556/maqetta/

ちょうど新しいHTMLページを作成し、左のバーの「道場コンテナ」セクションを見て...

だからあなたの例次のようになります。

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" 
data-dojo-props="design: 'headline'"> 

<div class = "centrePanel" 
    data-dojo-type="dijit.layout.ContentPane" 
    data-dojo-props="region: 'center'"> 
     <div id="innerLayout" data-dojo-type="dijit.layout.BorderContainer" 
data-dojo-props="design: 'headline'"> 

      <div 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region: 'top'"> 
        Hello World      
      </div> 


      <div 
       data-dojo-type="dijit.layout.TabContainer" 
       data-dojo-props="region: 'center'"> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
       </asp:ContentPlaceHolder>      
      </div>     

    </div> 

</div>   
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div> 
<div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>