What's New?

[CLOSED] FieldSet height depending on content

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Jul 17, 2012, 5:23 PM

    [CLOSED] FieldSet height depending on content

    Hi,
    I implemented a fieldset that contains six fields when I make the last two felds hidden using javascript fieldset height doesn't change.
    I reproduced the problem in the code bellow : 
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        var onPageLoad = function () {
            _txt2.hide();
            _txt3.hide();
        };
    </script>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
        <Listeners>
            <DocumentReady Handler="onPageLoad();" />
        </Listeners>
    </ext:ResourceManager>
    <ext:Panel runat="server" ID="_pnl" Border="false">
        <Items>
            <ext:FormPanel runat="server" ID="_formPnl" Border="false">
                <Items>
                    <ext:FieldSet Title="FieldSet" Collapsible="true" runat="server" ID="_fieldSet" Layout="HBoxLayout">
                        <Items>
                            <ext:Panel runat="server" ID="_pnlLeft" Border="false" Flex="1" Layout="AnchorLayout">
                                <Items>
                                    <ext:TextField FieldLabel="TXT0" runat="server" ID="_txt0">
                                    </ext:TextField>
                                    <ext:TextField FieldLabel="TXT1" runat="server" ID="_txt1">
                                    </ext:TextField>
                                    <ext:TextField FieldLabel="TXT2" runat="server" ID="_txt2">
                                    </ext:TextField>
                                    <ext:TextField FieldLabel="TXT3" runat="server" ID="_txt3">
                                    </ext:TextField>
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" ID="_pnlRight" Border="false" Flex="1" Layout="AnchorLayout">
                                <Items>
                                    <ext:TextField FieldLabel="TXT4" runat="server" ID="_txt4">
                                    </ext:TextField>
                                    <ext:TextField FieldLabel="TXT5" runat="server" ID="_txt5">
                                    </ext:TextField>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Panel>
</body>
</html>
    thank you in advance.
    Attached Thumbnails Click image for larger version.  Name: Screenshot.png  Views: 125  Size: 5.7 KB  ID: 4496  
    Last edited by Daniil; Jul 18, 2012 at 6:45 AM. Reason: [CLOSED]
  2. #2
    Jul 17, 2012, 5:42 PM
    Hi,

    I would set up
    Hidden="true"
    for the both TextFields to get them initially hidden.
  3. #3
    Jul 17, 2012, 6:32 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    I would set up
    Hidden="true"
    for the both TextFields to get them initially hidden.
    I setted up 
    Hidden="true"
    and I implemented a button click listener, when I click on button textFields doesn't appear.
    This is the code : 
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        var showFields = function () {
            Ext.getCmp('_txt2').show();
            Ext.getCmp('_txt3').show();
        };
    </script>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport runat="server" AutoHeight="true">
        <Items>
            <ext:Panel runat="server" ID="_pnl" Border="false">
                <Items>
                    <ext:FormPanel runat="server" ID="_formPnl" Border="false" AutoHeight="true">
                        <Items>
                            <ext:FieldSet Title="FieldSet" Collapsible="true" runat="server" ID="_fieldSet" Layout="HBoxLayout">
                                <Items>
                                    <ext:Panel runat="server" ID="_pnlLeft" Border="false" Flex="1" Layout="AnchorLayout"
                                        AutoDoLayout="true" AutoHeight="true">
                                        <Items>
                                            <ext:TextField FieldLabel="TXT0" runat="server" ID="_txt0">
                                            </ext:TextField>
                                            <ext:TextField FieldLabel="TXT1" runat="server" ID="_txt1">
                                            </ext:TextField>
                                            <ext:TextField FieldLabel="TXT2" Hidden="true" runat="server" ID="_txt2">
                                            </ext:TextField>
                                            <ext:TextField FieldLabel="TXT3" Hidden="true" runat="server" ID="_txt3">
                                            </ext:TextField>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel runat="server" ID="_pnlRight" Border="false" Flex="1" AutoDoLayout="true"
                                        Layout="AnchorLayout">
                                        <Items>
                                            <ext:TextField FieldLabel="TXT4" runat="server" ID="_txt4">
                                            </ext:TextField>
                                            <ext:TextField FieldLabel="TXT5" runat="server" ID="_txt5">
                                            </ext:TextField>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:FieldSet>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Panel>
            <ext:Button Text="Click" runat="server" ID="_btn">
                <Listeners>
                    <Click Handler="showFields();" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:Viewport>
</body>
</html>
  4. #4
    Jul 17, 2012, 7:22 PM
    Please call
    _fieldSet.doLayout()
    after showing the fields.
  5. #5
    Jul 17, 2012, 7:26 PM
    Quote Originally Posted by Daniil View Post
    Please call
    _fieldSet.doLayout()
    after showing the fields.
    nothing is displayed
  6. #6
    Jul 17, 2012, 8:37 PM
    I was able to get your sample working (after some code formatting) with the following configuration.

    Example

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

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


<!DOCTYPE html>


<html>
<head runat="server">
    <title>Ext.NET Example</title>
    <script type="text/javascript">
        var showFields = function () {
            TextField3.show();
            TextField4.show();
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />


    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:FormPanel runat="server" Border="false" Layout="FitLayout">
                <Items>
                    <ext:FieldSet 
                        runat="server" 
                        Title="FieldSet" 
                        Layout="hbox">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Border="false" 
                                Flex="1" 
                                Layout="FormLayout">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Item 1" />
                                    <ext:TextField runat="server" FieldLabel="Item 2" />
                                    <ext:TextField 
                                        ID="TextField3" 
                                        runat="server" 
                                        FieldLabel="Item 3" 
                                        Hidden="true" 
                                        />
                                    <ext:TextField 
                                        ID="TextField4" 
                                        runat="server" 
                                        FieldLabel="Item 4" 
                                        Hidden="true" 
                                        />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                runat="server" 
                                Border="false" 
                                Flex="1" 
                                Layout="FormLayout">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Item 5" />
                                    <ext:TextField runat="server" FieldLabel="Item 6" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                </Items>
                <Buttons>
                    <ext:Button Text="Click" runat="server">
                        <Listeners>
                            <Click Handler="showFields();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
</body>
</html>
    I believe the key piece was setting the following <LayoutConfig> on the <ext:FieldSet>.

    Example

    <LayoutConfig>
    <ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
    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

Similar Threads

  1. Height of TabPanel content
    By Chuck in forum 1.x Help
    Replies: 9
    Last Post: Mar 14, 2012, 9:31 PM
  2. [CLOSED] Automatic window height based on content
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 28, 2011, 3:49 PM
  3. [CLOSED] Adapt TabPanels height depending on the active Panels height?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 14, 2011, 10:51 AM
  4. [CLOSED] [1.0] MessageBoxConfig textbox height - min height
    By methode in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 07, 2010, 10:12 AM
  5. Max height of Panel or FieldSet?
    By dbassett74 in forum 1.x Help
    Replies: 1
    Last Post: Feb 18, 2010, 1:37 PM

Posting Permissions