PDA

View Full Version : viewport inside panel



UserClarion
Jun 27, 2012, 11:40 AM
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



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

geoffrey.mcgill
Jun 27, 2012, 5:38 PM
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


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

UserClarion
Jun 27, 2012, 8:38 PM
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.

geoffrey.mcgill
Jun 29, 2012, 12:30 AM
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.

UserClarion
Jun 29, 2012, 5:49 AM
Thanks,
any chance for some example?

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

The Examples Explorer is a good place to start, see

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

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

Hope this helps.

UserClarion
Jun 29, 2012, 8:17 AM
Thanks a lot.