Dojo布局 - 面板内的两个面板

我刚开始学习dojo进行评估练习（我们可能会在工作中使用它）。项目的时间表可能不会让我从头开始学习，所以我在深入探索。我想知道是否有人能指出我正确的方向;Dojo布局 - 面板内的两个面板

下面的代码表示他们教程中的一个页面;

^^那是什么意思的样子。

我有这样的工作，但我想要两个面板在中心部分：顶部的普通内容面板和它下面的标签面板。下面的代码表示我以为我可能会做到这一点。我发现的是，如果我注释掉内容窗格（带有“Hello world”的内容窗格），那么它会“接管”其父内容窗格，并且标签面板不再显示。取消注释，然后我回到我的标签。

有人能指出我如何做到这一点的一个很好的例子吗？

<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>

来源

2011-12-07 Mikey Hogarth

您可以在design = headline中嵌套第二个borderContainer到您的中心contentpane（而不是tabcontainer）中。然后，您可以将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>

来源

2011-12-07 18:44:43 Philippe

感谢你为这个。复制/粘贴上面的代码实际上并不奏效，但它让我朝着正确的方向前进，并且设法实现了我所想要的！你知道任何体面的资源来学习事物的布局吗？官方网站似乎有点风平浪静。 –

当然：http://dojotoolkit.org/documentation/tutorials/1.6/dijit_layout/ – Philippe

顺便说一下，你也可以做一个没有内部BorderContainer的布局。只需将您的TabContainer放置在“底部”区域，并将ContentPane保留在“中心”区域即可。 – Philippe

Dojo布局 - 面板内的两个面板

回答

相关问题