[CLOSED] VBOXLayout Not Behaving as I tought it would

2 Attachment(s)

Your sample for setting a "ROWS" layout with VBoxLayout is shown below, It Works Fine.
https://examples4.ext.net/#/Layout/VBoxLayout/Rows/

Code:

<body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" Layout="VBoxLayout"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:Panel runat="server" Title="Initial Height = 25%" Flex="1" /> <ext:Panel runat="server" Title="Initial Height = 100px" Height="100" /> <ext:Panel runat="server" Title="Initial Height = 75%" Flex="3" /> </Items> </ext:Viewport> </body>

This is how this "Original Sample" Renders
Attachment 24999

================================================== ==========================
Now I took this sample and made a simple change (code shown below)
Moved the VBOXLAYOUT container to a Panel inside the Viewport
(Note: I changed titles to visualize the props set and also added borders)

Code:

<body> <ext:ResourceManager runat="server" /> <ext:Viewport ID="MainViewPort" runat="server"> <Items> <ext:Panel ID="VBoxPanel" runat="server" Layout="VBoxLayout"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch"/> </LayoutConfig> <Items> <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" /> <ext:Panel runat="server" Title="Height=100 No Flex" Height="100" BodyStyle="border:2px dotted green;" /> <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" /> </Items> </ext:Panel> </Items> </ext:Viewport> </body>

This is how this "Slightly Changed Sample" Renders
Attachment 25000

The Question is:
Why the Flex panels do not expand inside the VboxLayout container for the second sample??

Hello @Rafaelcjr!

You probably want to either:
- remove the outer panel

Code:

<body> <ext:ResourceManager runat="server" /> <ext:Viewport ID="MainViewPort" runat="server"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch"/> </LayoutConfig> <Items> <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" /> <ext:Panel runat="server" Title="Height=100 No Flex" Height="100" BodyStyle="border:2px dotted green;" /> <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" /> </Items> </ext:Viewport> </body>

- give the viewport a layout setting so that the outer panel occupies fullscreen

Code:

<body> <ext:ResourceManager runat="server" /> <ext:Viewport ID="MainViewPort" runat="server" Layout="FitLayout"> <Items> <ext:Panel ID="VBoxPanel" runat="server" Layout="VBoxLayout"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch"/> </LayoutConfig> <Items> <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" /> <ext:Panel runat="server" Title="Height=100 No Flex" Height="100" BodyStyle="border:2px dotted green;" /> <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" /> </Items> </ext:Panel> </Items> </ext:Viewport> </body>

Or else unexpected layout issues will happen. Notice that the viewport is but a container that fits the whole viewable browser area (thus the name 'viewport').

In fact, by default the ViewPort is but at VBox layout, so the panel immediately inside just does not get the full height of the screen, resulting in what you've seen. And what you probably didn't see is that the 'flex' setting had but no effect in both upper and lower panels. If you give the outer panel (immediately inside the viewport) this setting, you would understand what I'm talking about:

Code:

StyleSpec="border: 2px solid red"

Notice how the red border will be immediately below the lower panel's title, as the panel got no height as well.

I hope this helps!

Hello @rafaelcjr!

It's been a while since we last posted here, but still no feedback from you. Did the last post help you at all, or do you happen to still need clarification regarding the layout issue you reported when opening this thread?

We'll leave this thread open for an additional 7 days from now at least. If you don't post back in the meanwhile we'll assume you don't need further help with this and will be marking this thread as closed. This won't prevent you from posting afterwards anyway, so don't worry.

Fabricio, sorry for the delay in response.
Your solution works perfectly - You can mark this as RESOLVED ( CLOSED)

I am slowly getting the gist of these layouts - makes sense that the Parent container would have to be implemented with a Layout to make the inner panel layout work. I am assuming that most 'outer' panels would usually require a FITLAYOUT to make sure that the entire area will be used by whatever layout the internal container has.

Hello @Rafaelcjr!

Thanks for your feedback, and glad it helped you!..

Note that the FitLayout won't do if you want, for example, add two panels inside its surroundings. FitLayout fits but one component. When you have more than one, some keywords you should consider exploring are Flex, Stretch, Region, WidthSpec/HeightSpec (like 100%, 50%) and Anchor.