[CLOSED] FieldSet height depending on content

Page 1 of 2 12 LastLast
  1. #1

    [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:	123 
Size:	5.7 KB 
ID:	4496  
    Last edited by Daniil; Jul 18, 2012 at 6:45 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I would set up
    Hidden="true"
    for the both TextFields to get them initially hidden.
  3. #3
    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
    Please call
    _fieldSet.doLayout()
    after showing the fields.
  5. #5
    Quote Originally Posted by Daniil View Post
    Please call
    _fieldSet.doLayout()
    after showing the fields.
    nothing is displayed
  6. #6
    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
  7. #7
    Quote Originally Posted by geoffrey.mcgill View Post
    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.
    It works but the fieldset height doesn't fit.
  8. #8
    Quote Originally Posted by Daly_AF View Post
    It works but the fieldset height doesn't fit.
    What does this comment mean?
    Geoffrey McGill
    Founder
  9. #9
    Actually fields are shown when I click on the button but the fieldset height does not fit the content area. It means, I would like to make the bottom border of the fieldset to be displayed under the last field (directly under "Item "2 when the page is loaded and under the field "Item 4" after clicking on the button).
    As it is now, there is a blank space between "Item 4" and the bottom border of the fieldset.

    Is my concern clear now?

    Thanks,
  10. #10
    I think the following sample demonstrates your scenario. Unfortunately it requires setting AutoHeight="true" on the Panels, and calling .doLayout() after your Fields are hidden.

    The good news is, this functionality has been cleaned up in 2.x and both of the above extra steps are not required (in 2.x).

    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();           
                
                FieldSet1.doLayout();
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
     
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel runat="server" Border="false">
                    <Items>
                        <ext:FieldSet
                            ID="FieldSet1"
                            runat="server"
                            Title="FieldSet"                        
                            Layout="hbox">
                            <LayoutConfig>
                                <ext:HBoxLayoutConfig Align="StretchMax" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel
                                    runat="server"
                                    Border="false"
                                    Flex="1"
                                    AutoHeight="true"
                                    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"
                                    AutoHeight="true"
                                    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>
    Hope this helps.
    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

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. 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