Question

我使用Dojo内容窗格边框容器和边框窗格创建了一个简单的布局控件。

<xe:djContentPane id="djContentPane1" style="width:auto; height:500px;">
        <xe:djBorderContainer id="djBorderContainer1">
            <xe:djBorderPane id="djBorderPane1" region="top">Header
            </xe:djBorderPane>

            <xe:djBorderPane id="djBorderPane2" region="center">Main
                Body
            </xe:djBorderPane>

            <xe:djBorderPane id="djBorderPane3" region="bottom">Footer
            </xe:djBorderPane>

            <xe:djBorderPane id="djBorderPane4" region="left"
                style="width:auto">main Navigator
            </xe:djBorderPane>
         </xe:djBorderContainer>
    </xe:djContentPane>

它完全符合我的要求（此时显然没有造型）除了两件事： 1.我无法弄清楚如何使djContentPane填满屏幕上的可用空间。宽度：自动工作，但似乎没有相应的高度规格。 2.我在region =“center”中添加了一个重复控制视图，它显示正常，除非内容超出可用高度时没有滚动条。我想当我读到一些帮助时，这应该是“中心”djBorderPane的默认值。我是否必须定义滚动条？

Answer 1

广告1：使用height:100%代替“自动”;对我来说很好，至少使用Firefox（没有尝试过其他浏览器）

广告2：我在上面的评论中推荐了一个围绕重复的面板。然后我添加了overflow：auto;作为面板的样式属性。您可以将其添加到重复本身，而不是使用额外的面板，但我通常更喜欢样式化外部div，因为有时您想要设置removeRepeat属性然后失去自己的样式可能性。这是边框面板代码的一部分：

<xe:djBorderPane id="djBorderPane2" region="center">Main Body
    <xp:panel id="outerDiv" style="width:100%;height:100%;overflow:auto;">
        <xp:repeat id="repeat1" rows="30" var="rowData">
            <xp:this.value>
                <![CDATA[#{javascript:["row1", "row2", "row3", "row4"]}]]>
            </xp:this.value>
            <xp:panel id="innerDiv">
                <xp:text escape="true" id="computedField1" value="#{javascript:rowData}">
                </xp:text>
            </xp:panel>
        </xp:repeat>
    </xp:panel>
</xe:djBorderPane>

再次，对我来说很好用

使用扩展dojo布局内容窗格和边框窗格

1 个答案: