What's New?

viewport inside panel

  1. #1
    Jun 27, 2012, 10:40 AM

    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
    Jun 27, 2012, 4: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.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jun 27, 2012, 7: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.
    Last edited by UserClarion; Jun 28, 2012 at 5:41 AM.
  4. #4
    Jun 28, 2012, 11:30 PM
    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
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jun 29, 2012, 4:49 AM
    Thanks,
    any chance for some example?
  6. #6
    Jun 29, 2012, 6:54 AM
    Quote Originally Posted by UserClarion View Post
    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.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Jun 29, 2012, 7:17 AM
    Thanks a lot.

Similar Threads

  1. [CLOSED] Fitlayout inside a viewport
    By critt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 16, 2012, 7:45 AM
  2. DraggableConfig inside ViewPort gives error
    By Prithviholla in forum 1.x Help
    Replies: 0
    Last Post: Oct 28, 2011, 11:17 AM
  3. [CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 18, 2011, 7: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, 11:44 AM
  5. [CLOSED] unable to render pdf inside viewport
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 19, 2010, 2:29 PM

Posting Permissions