viewport inside panel

  1. #1

    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

    <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>
  2. #2
    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.
    Geoffrey McGill
    Founder & CEO
  3. #3
    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.
    Last edited by UserClarion; Jun 28, 2012 at 6:41 AM.
  4. #4
    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.
    Geoffrey McGill
    Founder & CEO
  5. #5
    Thanks,
    any chance for some example?
  6. #6
    Quote Originally Posted by UserClarion View Post
    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.
    Geoffrey McGill
    Founder & CEO
  7. #7
    Thanks a lot.

Similar Threads

  1. [CLOSED] Fitlayout inside a viewport
    By critt in forum 1.x Premium Help
    Replies: 2
    Last Post: Jan 16, 2012, 8:45 AM
  2. DraggableConfig inside ViewPort gives error
    By Prithviholla in forum 1.x Help
    Replies: 0
    Last Post: Oct 28, 2011, 12:17 PM
  3. Replies: 3
    Last Post: May 18, 2011, 8:06 PM
  4. Can't have a ViewPort inside a div
    By paul-2011 in forum 1.x Help
    Replies: 6
    Last Post: Jan 09, 2011, 12:44 PM
  5. [CLOSED] unable to render pdf inside viewport
    By yobnet in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 19, 2010, 3:29 PM

Posting Permissions