[CLOSED] Scrolling using FitLayout / RowLayout / Panel - how to get it working?

[wagger]

So I have been trying to get some scrolling going, but I guess someone needs to explain to me how it works because its pretty far from obvious.

This gets a scrollbar:

<ext:FitLayout runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server" AutoScroll="true">
                 <Items>
                                <ext:Label runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label1" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label2" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label3" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label4" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label5" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label6" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label7" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label8" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                <ext:Label ID="Label9" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                </Items>
            </ext:Panel>
</ext:FitLayout>

this does not get a scrollbar:

<ext:FitLayout runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server" AutoScroll="true">
                <Items>
                     <ext:RowLayout ID="RowLayout1" runat="server" Split="false">
                            <Rows>
                              <ext:LayoutRow>
                                <ext:Panel runat="server">
                                    <Items>
                                         <ext:Label runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label1" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label2" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label3" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label4" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label5" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label6" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label7" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label8" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                         <ext:Label ID="Label9" runat="server" Html="asd asd asd <br /> qwe qwe qwe <br /> fgh fgh fgh <br />"></ext:Label>
                                  </Items>
                                </ext:Panel>
                              </ext:LayoutRow>
                            </Rows>
                        </ext:RowLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:FitLayout>

My logic tells me that it should get scrollbars in both cases. What am I missing?

[Daniil]

Hi,

It's a peculiarity of RowLayout.

Please set up

<ext:Panel runat="server" RowHeight="1" AutoScroll="true">

for the Panel which contains Labels.

[wagger]

ok, so the next question will then be:

How do I make sure that I get a scrollbar in this scenario:

<ext:FitLayout runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server" AutoScroll="true">
                <Items>
                       <ext:RowLayout ID="RowLayout1" runat="server" Split="false">
                           <Rows>
                               <ext:LayoutRow>
                                   // Stuff and such
                                </ext:LayoutRow>
                                <ext:LayoutRow>
                                      // Stuff and such
                                </ext:LayoutRow>
                                <ext:LayoutRow>
                                    // Stuff and such
                                </ext:LayoutRow>
                               // etc etc etc
                            </Rows>
                        </ext:RowLayout>
                </Items>
            </ext:Panel>
        </Items>
</ext:FitLayout>

The thing is I want the "Panel1" to make all the content AutoScroll. I do not want each row to have a scrollbar, but the whole thing.

Im not sure how to do that...

[Daniil]

I understand, you need scrolling for the Panel that contains RowLayout, isn't that so?

If so, unfortunately, RowLayout doesn't support scrolling.

What about the following layout?

Example

<ext:Panel runat="server" Height="300" AutoScroll="true">
    <Items>
        <ext:Panel runat="server" Title="1" Height="400">
            ...
        </ext:Panel>
        <ext:Panel runat="server" Title="2" Height="400">
            ...
        </ext:Panel>
    </Items>
</ext:Panel>

[wagger]

Thanks again. That works.

The funny thing is that I try numerous different ways of layout:ing. I add, remove and try out different panels, RowLayouts etc to get it right, and in the end I ended up with the RowLayout.

But in accordance to your suggestion, it works just as well with panels only.

Thanks for the help, once again =)

[Daniil]

Please note that layout managers that manages items height breaks vertical scrolling. The same situation with width and horizontal scrolling.

[wagger]

Do you mean if you set the Height or Width property? Or AutoWidth/AutoHeight?

[Daniil]

No.

I mean that, for example, a Panel with FitLayout can't have vertical and horizontal scrolling, because it fits height and width of child widget to parent's width and height.

[geoffrey.mcgill]

I'll just add in here, if it's not already obvious...

The auto scrolling functionality of some layouts (hbox, vbox, column) is quirky in v1. We've attempted to work-around some of these problems, but they're difficult problems to fix 100% successfully.

We're hoping/expecting the next major Ext.NET release (v2) will help solve some of these inconsistencies.