Using the Extension dojo layout Content Pane and Border Pane

Question

I have created a simple Layout control using the Dojo Content Pane Border Container and Border Pane.

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

It does pretty much what I want (obviously no styling on it at this point) except for two things: 1. I can't figure out how to make the djContentPane fill the full space available on the screen. The width:auto works but there does not appear to be a corresponding height specification. 2. I added a repeat control view into the region="center" and it displays fine except when the content exceeds the height available there is no scrollbar. I think as I read some of the help this should be the default for the "center" djBorderPane. Do I have to define the scrollbar?

Answer 1

ad 1.: use height:100% instead of "auto"; works fine for me, at least using Firefox (haven't tried other browsers)

ad 2.: I put a panel around the repeat as recommended in my above comment. Then I added overflow:auto; as a style property to the panel. Instead of using an extra panel you also could add that to the repeat itself, but I usually prefer styling an outer div because sometimes you want to set the removeRepeat property and then lose its own styling possibilities. Here's my portion of the border panel's code:

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

again, works fine for me