What's New?

[CLOSED] Complex Layout

  1. #1
    Jul 08, 2011, 4:13 PM

    [CLOSED] Complex Layout

    How can I achieve a layout like this?

    Click image for larger version.  Name: layout.png  Views: 99  Size: 6.4 KB  ID: 2959

    So far, I have the following code but I feel it's too nested and there should be a simpler way.
        <ext:Viewport runat="server" ID="v" Layout="fit">
        <Items>
            <ext:Panel runat="server" Layout="Border">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Close" IconCls="icon-close">
                            </ext:Button>
                            <ext:Button runat="server" Text="Save" IconCls="icon-save">
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:TreePanel runat="server" ID="tvContent" Region="West" Width="175" Margins="5 5 5 5"
                        Split="true" Collapsible="true" Title="Tree">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" ID="btnAddDS" Text="Add">
                                    </ext:Button>
                                    <ext:Button runat="server" ID="btnDeleteDS" Text="Delete">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Root>
                            <ext:TreeNode Text="test">
                            </ext:TreeNode>
                        </Root>
                    </ext:TreePanel>
                    <ext:Panel ID="Panel2" runat="server" Region="Center" BodyBorder="false" Margins="5 5 5 0">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel ID="Panel5" runat="server" Height="100" Margins="0 0 5 0" BodyBorder="false">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel ID="Panel3" runat="server" Title="Panel" Height="100" Margins="0 3 0 0"
                                        Flex="1">
                                    </ext:Panel>
                                    <ext:Panel ID="Panel1" runat="server" Title="Panel" Height="100" Margins="0 0 0 3"
                                        Flex="1">
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="Panel4" runat="server" Flex="1" Title="Panel">
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    Last edited by Daniil; Jul 18, 2011 at 2:42 PM. Reason: [CLOSED]
  2. #2
    Jul 08, 2011, 6:33 PM
    Hi,

    There's maybe a little clean-up you can do, but your configuration is not overly nested. Looks good to me.

    I reworked your sample with some minor revisions. You were also missing the .Layout property on a couple of the Center region Panels. As well, I converted a few of the <ext:Panel>'s to <ext:Containers>. The Panel can be substituted for an <ext:Container> when you don't need the features/functionality of a Panel, such as .Title, .Border, Toolbars, etc.

    Example

    <%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />


        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel runat="server" Layout="BorderLayout">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Close" IconCls="icon-close" />
                                <ext:Button runat="server" Text="Save" IconCls="icon-save" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:TreePanel 
                            runat="server" 
                            ID="tvContent" 
                            Region="West" 
                            Width="175" 
                            Margins="5 5 5 5"
                            Split="true" 
                            Collapsible="true" 
                            Title="Tree">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button runat="server" Text="Add" />
                                        <ext:Button runat="server" Text="Delete" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Root>
                                <ext:TreeNode Text="test" />
                            </Root>
                        </ext:TreePanel>
                        <ext:Container 
                            runat="server" 
                            Region="Center" 
                            BodyBorder="false" 
                            Margins="5 5 5 0" 
                            Layout="VBoxLayout">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Container 
                                    runat="server" 
                                    Margins="0 0 5 0" 
                                    BodyBorder="false"
                                    Layout="HBoxLayout">
                                    <Items>
                                        <ext:Panel runat="server" Title="Panel" Height="100" Margins="0 3 0 0" Flex="1" />
                                        <ext:Panel runat="server" Title="Panel" Height="100" Margins="0 0 0 3" Flex="1" />
                                    </Items>
                                </ext:Container>
                                <ext:Panel runat="server" Flex="1" Title="Panel" />
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
</form>
</body>
</html>
    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
    Jul 08, 2011, 8:07 PM
    Thanks Geoffrey. I didn't know I have to set Layout property if I specify a LayoutConfig. Thanks for the tips!
  4. #4
    Jul 08, 2011, 8:10 PM
    Hi,

    I didn't know I have to set Layout property if I specify a LayoutConfig.
    No, it is not required, LayoutConfig is enough to specify a layout

Similar Threads

  1. MDI form and Complex Layout
    By themack in forum 1.x Help
    Replies: 0
    Last Post: Sep 25, 2011, 6:20 PM
  2. [CLOSED] Add/Save Complex Objects?
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 04, 2011, 5:35 PM
  3. store and complex key
    By maxdiable in forum 1.x Help
    Replies: 1
    Last Post: Nov 26, 2010, 6:46 PM
  4. [CLOSED] 0.82 Bottom PagingToolbars in a complex layout example do not appear
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 04, 2010, 3:57 PM
  5. [CLOSED] Create complex FormLayout
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Mar 11, 2009, 8:52 AM

Posting Permissions