Height layout problem

  1. #1

    Height layout problem

    Hi,

    I'm stuck with a layout problem...
    I currently have the layout explained below (simplified, stripped of all events/listeners/logic).
    I want to make the panel "Panel3" (effectively the Tree) fill the rest of the page.
    The FormPanel should be autoheight to its content, which seems to be working.
    Then I want the Tree to take up the rest of the page, displaying the "BottomBar" statusbar at the bottom of the page.
    When folding out nodes in the Tree (currently empty), I would like the Tree scroll, not the entire page.

    In short terms - The Tree should use all available "space" on the page, not already used by other "items"...

    It feels like I've tried everything, fitlayout, viewport, javascripting, and now I'm back to the basic layout...
    It may be hard to understand my request by only looking at the code... running the code should show you what i mean...

    Of course, it would be a big plus :D: if the "autoheight" reacted and adapted itself if the FormPanel is collapsed, or if the window is resized, although it's not required at this point.

    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
        <form id="form1" runat="server">
        <div>
            <ext:FormPanel runat="server" Border="false" MonitorValid="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar2" runat="server">
                        <Items>
                            <ext:Button ID="Save" runat="server" Icon="Accept" Text="Save" FormBind="true"></ext:Button>
                            <ext:ToolbarFill />
                            <ext:Button ID="Delete" runat="server" Icon="Delete" Text="Delete"></ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="UnitType Details" AutoHeight="true" FormGroup="true" Padding="10">
                        <Items>
                            <ext:ComboBox ID="ComboBox2" runat="server" Width="400" FieldLabel="Manufacture"
                                EmptyText="Select manufacture" TypeAhead="true" Mode="Local" AllowBlank="false"
                                DisplayField="name" ValueField="id" IndicatorIcon="BulletRed" FireSelectOnLoad="true">
                            </ext:ComboBox>
                            <ext:TextField ID="ModelName" runat="server" Width="400" FieldLabel="Model name"
                                AllowBlank="false" EmptyText="Enter model name" IndicatorIcon="BulletRed">
                            </ext:TextField>
                            <ext:TextField ID="Vendor" runat="server" Width="400" FieldLabel="Vendor" EmptyText="Enter vendor name"
                                IndicatorIcon="BulletGreen">
                            </ext:TextField>
                            <ext:TextField ID="Description" runat="server" Width="400" FieldLabel="Description"
                                EmptyText="Enter description" IndicatorIcon="BulletGreen">
                            </ext:TextField>
                            <ext:ComboBox ID="ComboBox1" runat="server" Width="400" FieldLabel="Parameters" EmptyText="Copy parameters from..."
                                IndicatorIcon="BulletGreen" TypeAhead="true" Mode="Local" AllowBlank="true" TriggerAction="All"
                                DisplayField="name" ValueField="name">
                            </ext:ComboBox>
                        </Items>
                    </ext:Panel>
                </Items>
                <Listeners>
                    <ClientValidation Handler="#{Save}.setDisabled(!valid);" />
                </Listeners>
            </ext:FormPanel>
            <ext:Panel ID="Panel3" runat="server" Title="Parameters" AutoWidth="true" FormGroup="true" Padding="4">
                <Items>
                    <ext:TreeGrid runat="server" ID="Parameters" AutoWidth="true" RootVisible="false">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true" EmptyText="Filter..."
                                        Width="200">
                                        <Triggers>
                                            <ext:FieldTrigger Icon="Clear" />
                                            <ext:FieldTrigger Icon="Combo" />
                                        </Triggers>
                                    </ext:TriggerField>
                                    <ext:ToolbarSpacer />
                                    <ext:ToolbarSpacer />
                                    <ext:Button ID="Button1" runat="server" Text="Add parameter" Icon="Add"></ext:Button>
                                    <ext:ToolbarSeparator></ext:ToolbarSeparator>
                                    <ext:Button ID="Button2" runat="server" Text="Expand All"></ext:Button>
                                    <ext:ToolbarSeparator></ext:ToolbarSeparator>
                                    <ext:Button ID="Button3" runat="server" Text="Collapse All"></ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Columns>
                            <ext:TreeGridColumn Header="Parameter" Width="300" DataIndex="Parameter" />
                            <ext:TreeGridColumn Header="Flags" Width="100" DataIndex="Flags" />
                            <ext:TreeGridColumn Header="Full path" Width="300" DataIndex="FullPath" Hidden="true" />
                        </Columns>
                        <BottomBar>
                            <ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" Text="BottomBar" />
                        </BottomBar>
                    </ext:TreeGrid>
                </Items>
            </ext:Panel>
        </div>
        </form>
    </body>
  2. #2
    Hi,

    I would suggest you to use BorderLayout. Please investigate the following example.

    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>
        <ext:ResourceManager runat="server" />
        <form runat="server">
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="North" 
                    Collapsible="true" 
                    Layout="form" 
                    AutoHeight="true">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Icon="Accept" Text="Save" />
                                <ext:ToolbarFill />
                                <ext:Button runat="server" Icon="Delete" Text="Delete" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField1" />
                        <ext:TextField runat="server" FieldLabel="TextField2" />
                    </Items>
                </ext:Panel>
                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Title="Title" 
                    Layout="fit">
                    <Items>
                        <ext:TreeGrid runat="server" RootVisible="false">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button runat="server" Icon="Accept" Text="Save" />
                                        <ext:ToolbarFill />
                                        <ext:Button runat="server" Icon="Delete" Text="Delete" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Columns>
                                <ext:TreeGridColumn Header="1" Width="300" DataIndex="1" />
                                <ext:TreeGridColumn Header="2" Width="100" DataIndex="2" />
                                <ext:TreeGridColumn Header="3" Width="300" DataIndex="3" />
                            </Columns>
                            <BottomBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:DisplayField runat="server" Text="BottomBar" />
                                    </Items>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:TreeGrid>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Btw did you investigate examples in Layout folder? For example,
    https://examples1.ext.net/#/Layout/B...lex_in_Markup/
  3. #3
    Daniil:
    Thank you, it got me a bit further, but not all the way :confused:

    I've tried different layout styles, but I can't get the layout I need... I tried your sample "off-the-shelf", and it's close to what I want...

    Basically, what's wrong is, from my initial sample code, the topmost menu (the TopBar in the FormPanel) should Always be in place (kinda like a "page menu"). It must not be collapsed, which is why I then (in my sample) have a collapsible Panel inside the FormPanel...

    If I use a BorderLayout, the entire North region must be collapsed in order for the Center region to fill the page... And unfortunately that collapses the topmost menu, which it shouldn't.

    The second problem is that the layout (CSS?) somehow differs when I use your sample (I don't know if it's because of the ViewPort or the borderlayout or something else). Using the "FormGroup" attribute in the panels in my sample, gives me a nice thin line alongside the header, with a collapse arrow to the left. Using this in the sample code you provided really doesn't look good at all (tried IE and Chrome). Maybe it's wrong to use that tag, how else will I achieve the same rendering/css?

    At last, running your sample code in Chrome seems to render a problem with the North region initially. It has to be collapsed/expanded once in order to render correctly.

    Thank you!
    //jansssson

    Here is an updated version of your code, with the FormGroup tag... Test in Chrome to see the collapse problem, and IE/Chrome for the css problem:

    <%@ Page Language="C#" %>
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    
    <!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></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" Theme="Gray" runat="server" />
        <form id="Form1" runat="server">
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="Panel1"
                    runat="server"
                    Region="North"
                    Collapsible="true"
                    Layout="form"
                    FormGroup="true"
                    Title="UnitType details"
                    AutoHeight="true">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Icon="Accept" Text="Save" />
                                <ext:ToolbarFill />
                                <ext:Button ID="Button2" runat="server" Icon="Delete" Text="Delete" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="TextField1" />
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="TextField2" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel2"
                    runat="server"
                    Region="Center"
                    Collapsible="true"
                    FormGroup="true"
                    Title="Parameters"
                    Layout="fit">
                    <Items>
                        <ext:TreeGrid ID="TreeGrid1" runat="server" RootVisible="false">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:Button ID="Button3" runat="server" Icon="Accept" Text="Save" />
                                        <ext:ToolbarFill />
                                        <ext:Button ID="Button4" runat="server" Icon="Delete" Text="Delete" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Columns>
                                <ext:TreeGridColumn Header="1" Width="300" DataIndex="1" />
                                <ext:TreeGridColumn Header="2" Width="100" DataIndex="2" />
                                <ext:TreeGridColumn Header="3" Width="300" DataIndex="3" />
                            </Columns>
                            <BottomBar>
                                <ext:Toolbar ID="Toolbar3" runat="server">
                                    <Items>
                                        <ext:DisplayField ID="DisplayField1" runat="server" Text="BottomBar" />
                                    </Items>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:TreeGrid>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    In according to these further details I can suggest you to use Accordion layout, please see an example
    https://examples1.ext.net/#/Layout/A...sic_in_Markup/

Similar Threads

  1. [CLOSED] Auto width/height not working for my layout
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 26, 2012, 10:10 PM
  2. [CLOSED] Column layout same height with button row
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 07, 2010, 8:11 AM
  3. card layout height
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2009, 4:11 AM
  4. [CLOSED] Row Layout Height
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 24, 2009, 9:39 AM
  5. [CLOSED] Struggling with Layout Height/Width
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 15, 2009, 12:37 PM

Tags for this Thread

Posting Permissions