HBoxLayout issue: NumberFields starts crushed togheter

  1. #1

    HBoxLayout issue: NumberFields starts crushed togheter

    Hello

    I have some number fields in a form panel inside a popup window and the first time that the window show up they are crushed together, when the window is resized they stretch themselves over the whole width of the window.
    How can I fix it, that they start already stretched over the whole width of the popup window?

    Before:
    Click image for larger version. 

Name:	before.png 
Views:	19 
Size:	4.0 KB 
ID:	6265
    After:
    Click image for larger version. 

Name:	after.png 
Views:	18 
Size:	4.0 KB 
ID:	6266

    <ext:FieldContainer runat="server" Layout="HBoxLayout">
        <FieldDefaults LabelAlign="Top" />
        <Items>
            <ext:NumberField runat="server" ID="NumberField1" FieldLabel="Worst Value" Name="WorstValue" Flex="1" AllowBlank="false" />
            <ext:NumberField runat="server" ID="NumberField2" FieldLabel="Best Value" Name="BestValue" Flex="1" AllowBlank="false" />
            <ext:NumberField runat="server" ID="NumberField3" FieldLabel="Step" Name="Step" Flex="1" MinValue="0" />
            <ext:NumberField runat="server" ID="NumberField4" FieldLabel="Sufficient" Name="PassingValue" Flex="1" />
        </Items>
    </ext:FieldContainer>
  2. #2
    Hi @Spamme,

    Please try to set up HideMode="Offsets" for Window or FieldContainer.

    If it doesn't help, please provide a full test case to reproduce.
  3. #3
    Hi Daniil

    Thanks for the reply but it didn't work, here my test case.
    <%@ Page Language="C#" AutoEventWireup="true"  %>
    <%@ 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">
    <script runat="server">
        private static List<Model> _models = new List<Model>();
    
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = (Store)sender;
            store.DataSource = this.Models;
            store.DataBind();
        }
    
        protected void Save_Click(object sender, DirectEventArgs e)
        {
            var models = this.Models;
            var m1 = JSON.Deserialize<Model>(e.ExtraParams["Values"]);
            var m2 = this.Models.SingleOrDefault(m => m.Id == m1.Id);
            if (m2 != null) this.Models.Remove(m2);
            if (m1.Id == Guid.Empty) m1.Id = new Guid();
            models.Add(m1);
        }
    
        protected List<Model> Models { get { return _models; } }
    
        public class Model
        {
            public Guid Id { get; set; }
            public string Name { get; set; }
            public double Worst { get; set; }
            public double Best { get; set; }
            public double? Step { get; set; }
            public double? Sufficient { get; set; }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="300" Title="Title">
                <HtmlBin>
                    <ext:Window runat="server" ID="Details" Title="Details" Layout="FitLayout" Width="400" Height="400" Modal="true" Hidden="true" HideMode="Offsets">
                        <Items>
                            <ext:FormPanel runat="server" ID="DetailsForm" Border="false" BodyPadding="10" HideMode="Offsets">
                                <FieldDefaults LabelAlign="Top" />
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Hidden ID="Hidden1" runat="server" Name="Id" />
                                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Name" Name="Name" AllowBlank="false" MaxLength="65"/>
                                    <ext:FieldContainer ID="FieldContainer1" runat="server" Layout="HBoxLayout" HideMode="Offsets">
                                        <FieldDefaults LabelAlign="Top" />
                                        <Items>
                                            <ext:NumberField runat="server" ID="Worst" FieldLabel="Worst" Name="Worst" Flex="1" AllowBlank="false" />
                                            <ext:NumberField runat="server" ID="Best" FieldLabel="Best" Name="Best" Flex="1" AllowBlank="false" />
                                            <ext:NumberField runat="server" ID="Step" FieldLabel="Step" Name="Step" Flex="1" MinValue="0" />
                                            <ext:NumberField runat="server" ID="Sufficient" FieldLabel="Sufficient" Name="Sufficient" Flex="1" />
                                        </Items>
                                    </ext:FieldContainer>
                                </Items>
                                <Buttons>
                                    <ext:Button ID="Button1" runat="server" Text="Cancel">
                                        <Listeners>
                                            <Click Handler="this.up('form').getForm().reset(); this.up('window').hide();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="Save" FormBind="true">
                                        <DirectEvents>
                                            <Click OnEvent="Save_Click" Before="return this.up('form').getForm().isValid();" Success="this.up('form').getForm().reset(); this.up('window').hide(); #{GridPanel1}.store.reload();">
                                                <ExtraParams>
                                                    <ext:Parameter Name="Values" Value="this.up('form').getForm().getValues()" Mode="Raw" Encode="true" />
                                                </ExtraParams>
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                </Buttons>
                            </ext:FormPanel>
                        </Items>
                    </ext:Window>
                </HtmlBin>
                <Store>
                    <ext:Store ID="Store1" runat="server" OnReadData="Store_ReadData">
                        <Model>
                            <ext:Model ID="Model1" Name="EvaluationCriterionType" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Id" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Worst" />
                                    <ext:ModelField Name="Best" />
                                    <ext:ModelField Name="Step" />
                                    <ext:ModelField Name="Sufficient" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Flex="3" DataIndex="Name" Text="Name" />
                        <ext:Column ID="Column2" runat="server" Flex="1" DataIndex="Worst" Text="Worst" />
                        <ext:Column ID="Column3" runat="server" Flex="1" DataIndex="Best" Text="Best" />
                        <ext:Column ID="Column4" runat="server" Flex="1" DataIndex="Step" Text="Step" />
                        <ext:Column ID="Column5" runat="server" Flex="1" DataIndex="Sufficient" Text="Sufficient" />
                        <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Flex="-1" HideTitleEl="true">
                            <HeaderItems>
                                <ext:LinkButton ID="LinkButton1" runat="server" Icon="Add" Text=" " ToolTip="New">
                                    <Listeners>
                                        <Click Handler="#{DetailsForm}.reset(); #{DetailsForm}.getForm().loadRecord(#{GridPanel1}.store.createModel({Id:'00000000-0000-0000-0000-000000000000'})); #{Details}.show();" />
                                    </Listeners>
                                </ext:LinkButton>
                            </HeaderItems>
                            <Commands>
                                <ext:ImageCommand CommandName="Edit" Icon="Pencil" ToolTip-Text="Edit" />
                            </Commands>
                            <Listeners>
                                <Command Handler="#{DetailsForm}.loadRecord(record); #{Details}.show();" />
                            </Listeners>
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </div>
        </form>
    </body>
    </html>
  4. #4
    I tried your sample with latest code and all works fine for me, I cannot reproduce the issue
  5. #5
    I use ext.net version 2.1.0.29217 and this is what I get the first time the popup windows is created:
    Click image for larger version. 

Name:	Test.png 
Views:	14 
Size:	2.9 KB 
ID:	6278
  6. #6
    Reproduced with v2.1.

    This causes the problem.
    <FieldDefaults LabelAlign="Top" />
    It applies on the FieldContainer as well and it causes wrong sizing.

    I can suggest to remove FieldDefaults and set LabelAlign="Top" for the TextField itself.
  7. #7
    Thanks, it worked.

Similar Threads

  1. Replies: 3
    Last Post: May 10, 2013, 11:24 AM
  2. Remove rouding of the NumberFields
    By Elyfran Vaz in forum 2.x Help
    Replies: 0
    Last Post: Mar 22, 2013, 5:02 PM
  3. How to compute the result for the numberfields?
    By MagicWang in forum 1.x Help
    Replies: 1
    Last Post: Mar 02, 2012, 8:17 AM
  4. [CLOSED] HBoxLayout hidden controls issue
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 22, 2010, 7:40 PM
  5. [CLOSED] HBoxLayout Issue w/Hidden items
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 18, 2010, 6:52 PM

Tags for this Thread

Posting Permissions