viewport inside panel

Printable View

Jun 27, 2012, 10:40 AM
UserClarion

viewport inside panel

Hi all
I have Tabpanel and few Panel's
I need to have different layouts inside each panel, for example:
on Panel1, I need Tree on left, Grid on top and bottom
on Panel2, I need to have grid on top and bottom
How to achieve that?
I saw some example's which uses Viewport, and it looks great, but problem is - I can not have many viewports?
Other thing - If I use just single Viewport, it is displayed on all Panels.
Is there some other way ?

here is whole code for single tab (I have removed all toolbar/buttons) - it does not look nice :(

THANKS

Code:

<body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:TabPanel ID="TabPanel1" runat="server"> <Items> <ext:Panel ID="Panel4" runat="server" Title="Some_Title"> <TopBar> </TopBar> <Content> <Items> <ext:Panel ID="Pane21" runat="server" Region="North" Title="North" Height="200" split="true"> </ext:Panel> <ext:Panel ID="Panel22" runat="server" Region="West" Title="West" width="300" split="true"> </ext:Panel> <ext:Panel ID="Panel23" runat="server" Region="Center" Title="Center" /> </Items> </Content> </ext:Panel> </Items> </ext:TabPanel> </form> </body>
Jun 27, 2012, 4:38 PM
geoffrey.mcgill

Hi,

Each Container type Component (such as Panel, Window, Container) can have its own Layout for Child <Items>. I think you just need to set .Layout="border" on your inner Panels.

Example

Code:

<ext:TabPanel ID="TabPanel1" runat="server" Height="350" Width="500"> <Items> <ext:Panel ID="Panel4" runat="server" Title="Some_Title" Layout="BorderLayout"> <Items> <ext:Panel ID="Pane21" runat="server" Region="North" Title="North" Height="200" split="true"> </ext:Panel> <ext:Panel ID="Panel22" runat="server" Region="West" Title="West" width="300" split="true"> </ext:Panel> <ext:Panel ID="Panel23" runat="server" Region="Center" Title="Center" /> </Items> </ext:Panel> </Items> </ext:TabPanel>

Hope this helps.
Jun 27, 2012, 7:38 PM
UserClarion

Hi
thanks, it works great.

Now, I need to find out how to adopt Height?
I have this:
<ext:Panel ID="Panel4" runat="server" Title="Some_title" Layout="BorderLayout" Height="800">
and it works OK, but Height="800" is hard coded, it will not be OK on other resolution.
Now I have 3 Panel's, North, West and Center.
North should have 25% height, West should have 100% and center 75%
(center should be 75% because North is 25%, so they together are 100%)
It is just 3 panels and I need them that they fill te space 100%
How to do that?
Thanks.
Jun 28, 2012, 11:30 PM
geoffrey.mcgill

Hi,

If using a BorderLayout, and you configure any/all of the North, South, East, or West Regions, those Regions require a fixed Height or Width.

If you would like a proportional layout, we would recommend using the HBoxLayout or VBoxLayout and setting the .Flex property of each child Container.

Hope this helps.
Jun 29, 2012, 4:49 AM
UserClarion

Thanks,
any chance for some example?
Jun 29, 2012, 6:54 AM
geoffrey.mcgill

Quote:

Originally Posted by UserClarion

Thanks,
any chance for some example?

The Examples Explorer is a good place to start, see

https://examples2.ext.net/#/Layout/HBoxLayout/Basic/

https://examples2.ext.net/#/Layout/VBoxLayout/Basic/

Hope this helps.
Jun 29, 2012, 7:17 AM
UserClarion

Thanks a lot.