What's New?

Layout row not expanding after collapsing fixed height row

  1. #1
    Jan 22, 2015, 5:23 PM

    Layout row not expanding after collapsing fixed height row

    Hello,

    I have a RowLayout with some fixed height rows, which contain a collapsable panel (FormGroup="true"), and the last one taking all the remaining space. When any of those panels is collapsed, the last row moves up instead of resizing to occupy all the space. Here is a small example to reproduce this:

    <%@ 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 id="Head1" runat="server">
    <title>Row resize problem</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>Row resize problem</h1>

    <ext:Panel runat="server" Height="300" Title="Parent Panel" Frame="true" Layout="Fit">
        <Items>
            <ext:RowLayout runat="server">
                <Rows>
                    <ext:LayoutRow>
                        <ext:Panel runat="server" Padding="5" Title="Collapsable Child Panel" FormGroup="true" Height="100">
                            <Items>
                                <ext:TextField runat="server" Text="Text 1" />
                                <ext:Button runat="server" Text="Button 1" />
                            </Items>
                        </ext:Panel>
                    </ext:LayoutRow>
                    <ext:LayoutRow RowHeight="1">
                        <ext:Panel runat="server" Padding="5" Title="Child panel that should fill the Parent Panel" Frame="true">
                            <Items>
                                <ext:TextField runat="server" Text="Text 2" />
                                <ext:Button runat="server" Text="Button 2" />
                            </Items>
                        </ext:Panel>
                    </ext:LayoutRow>
                    <ext:LayoutRow RowHeight="0.001">
                        <ext:Label runat="server" Text="OOPS! This shouldn't be seen!" />
                    </ext:LayoutRow>
                </Rows>
            </ext:RowLayout>
        </Items>
    </ext:Panel>
</body>
</html>
    Is this behavior possible with a RowLayout? Or must I use a Border layout instead? Right now the code is using the panels' BeforeCollapse and BeforeExpand direct events to manually calculate and set the height of the last panel, but I thought there must be an easier way to do this.

    Thanks and regards,

    Andrew
    Last edited by ALobpreis; Jan 22, 2015 at 5:26 PM.
  2. #2
    Jan 23, 2015, 3:11 PM
    If you're just trying to have the top panel collapse and have the bottom panel fill, then you should consider a VBoxLayout. Set the Flex property on the panel you want to resize and leave the rest with fixed heights. Also, setting the entire child panel as collapsible instead of using FormGroup might be of benefit to you.

    <%@ 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 id="Head1" runat="server">
    <title>Row resize problem</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>Row resize problem</h1>

    <ext:Panel runat="server" Height="300" Title="Parent Panel" Frame="true" Layout="Fit">
        <Items>
            <ext:VBoxLayout runat="server" Align="Stretch">
                <BoxItems>
                    <ext:BoxItem>
                        <ext:Panel runat="server" Padding="5" Title="Collapsable Child Panel" FormGroup="true" Height="100">
                            <Items>
                                <ext:TextField runat="server" Text="Text 1" />
                                <ext:Button runat="server" Text="Button 1" />
                            </Items>
                        </ext:Panel>
                    </ext:BoxItem>
                    <ext:BoxItem>
                        <ext:Panel runat="server" Padding="5" Title="Another Panel" Height="80" Collapsible="true">
                            <Content>more content</Content>
                        </ext:Panel>
                    </ext:BoxItem>
                    <ext:BoxItem Flex="1">
                        <ext:Panel runat="server" Padding="5" Title="Child panel that should fill the Parent Panel" Frame="true">
                            <Items>
                                <ext:TextField runat="server" Text="Text 2" />
                                <ext:Button runat="server" Text="Button 2" />
                            </Items>
                        </ext:Panel>
                    </ext:BoxItem>
                </BoxItems>
            </ext:VBoxLayout>
        </Items>
    </ext:Panel>
</body>
</html>
  3. #3
    Jan 23, 2015, 4:38 PM
    It worked fantastically well!! Right after you suggested using VBox, I remembered that VBox and HBox are more advanced versions of Row and ColumnLayout.

    I tried the Collapsible mode but I can't change the look and feel of the window, so I'll keep it as it is for now. What's the advantage of Collapsible over FormGroup?

    Thanks a lot for your time and effort, Scott!! :)

    Andrew
    Last edited by ALobpreis; Jan 23, 2015 at 4:54 PM.
  4. #4
    Jan 24, 2015, 4:19 AM
    Quote Originally Posted by ALobpreis
    I tried the Collapsible mode but I can't change the look and feel of the window, so I'll keep it as it is for now. What's the advantage of Collapsible over FormGroup?
    I don't think FormGroup is supported after v1.x, although you can use a FieldSet to achieve the same effect. I think it's also limited to the default theme. Beyond that, I suppose it's just personal preference.

Similar Threads

  1. [FIXED] [1.2] Minor Line-height issue
    By cwolcott in forum Bugs
    Replies: 8
    Last Post: Dec 29, 2011, 6:55 PM
  2. [CLOSED] iframe reloads when expanding/collapsing border layouts in hover mode
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 11, 2011, 6:38 PM
  3. [CLOSED] Expanding / Collapsing all groups of a gridpanel
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 17, 2010, 7:43 PM
  4. FieldSet title shifting when expanding/collapsing
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 28, 2009, 7:57 PM
  5. FieldSet title shifting when expanding/collapsing
    By dbassett74 in forum 1.x Help
    Replies: 4
    Last Post: May 06, 2009, 1:15 PM

Tags for this Thread

Posting Permissions