What's New?

[CLOSED] width not set in FormLayout

  1. #1
    Jan 25, 2010, 6:58 PM

    [CLOSED] width not set in FormLayout

    if I remove Width="550" from Fieldset and use AutoWidth="true" then set width on each TextField i.e width="250" . It has no effect. width is using Anchor Horizontal="80%". Do I have to use ANchor Horizontal="50%" for example or is there a way to set specific width for each anchor item.
    thanks
    idriss


    


<ext:ViewPort ID="viewport1" runat="server" StyleSpec="background-color:#ffffff;">


<Body>


<ext:BorderLayout ID="BorderLayout1" runat="server">


<North MarginsSummary="5 5 5 5" MaxHeight="55">


<ext:Panel ID="pnlTop" runat="server" Header="false" Frame="false" AutoHeight="true"


BodyStyle="padding:4px 0px 2px 6px;background-color:#ffffff;" >


<Body>


<div >


Some Text




</Body>


</ext:Panel>


</North>





<Center MarginsSummary="0 5 5 5" Collapsible="true">


<ext:Panel ID="pnlBottom" runat="server" Header="false" Frame="true" Border="true" BodyBorder="true" Cls="thin-frame"


BodyStyle="padding:0px 10px;background:#FFF8EA;"


ButtonAlign="Right" AutoScroll="true">


<Body>


<ext:FormPanel ID="FormPanel1" runat="server" MonitorPoll="500" MonitorValid="true"


BodyStyle="padding:2px;" ButtonAlign="Right">


<Body>


<ext:Panel ID="Panel1" runat="server" Title=" " Header="false" BodyStyle="padding:6px;"


BodyBorder="false" AutoHeight="true"> 


<Body>


<ext:ContainerLayout ID="ContainerLayout1" runat="server">


<ext:FieldSet ID="FieldSet1" runat="server" CheckboxToggle="false" Title="Mailing"


AutoHeight="true" Collapsible="false" Width="550"


BodyStyle="padding:2px 4px 4px 10px !important;" LabelSeparator=""


LabelStyle="padding:0px 0px 0px 0px !important; width:0px !important;">


<Body>


<ext:FormLayout ID="FormLayout1" runat="server" LabelAlign="Top">


<ext:Anchor Horizontal="80%">


<ext:TextField ID="MailingAddressLine1" runat="server" FieldLabel="Address1" AllowBlank="false"


Cls="input-height" BlankText="Mailing Address is required" InvalidClass="error"


ItemCls="required" />


</ext:Anchor>


<ext:Anchor Horizontal="80%">


<ext:TextField ID="MailingAddressLine2" runat="server" FieldLabel="Address2" AllowBlank="false"


Cls="input-height" BlankText="Mailing Address is required" InvalidClass="error"


ItemCls="required" />


</ext:Anchor>


<ext:Anchor Horizontal="90%" IsFormField="true">


<ext:MultiField ID="MultiField1" runat="server" 


LabelSeparator="" LabelStyle="padding:0px 0px 0px 0px !important; width:0px !important;">


<Fields>





<ext:TextField ID="MailingCity" runat="server" FieldLabel="MailingCity" AllowBlank="false"


Cls="input-height" BlankText="Mailing City is required" InvalidClass="error"


ItemCls="required" NoteAlign="Top" Note="City:" NoteCls="labelcls" />





<ext:TextField ID="MailingState" runat="server" FieldLabel="MailingState" AllowBlank="false"


Cls="input-height" BlankText="Mailing State is required" InvalidClass="error"


ItemCls="required" NoteAlign="Top" Note="State:" NoteCls="labelcls"/>





<ext:TextField ID="MailingZip" runat="server" FieldLabel="MailingZip" AllowBlank="false"


Cls="input-height" BlankText="Mailing Zip is required" InvalidClass="error" ItemCls="required" 


NoteAlign="Top" Note="Zip:" NoteCls="labelcls"/>


</Fields>


</ext:MultiField>


</ext:Anchor>


<ext:Anchor Horizontal="24%">


<ext:TextField ID="MailingCounty" runat="server" FieldLabel="County" AllowBlank="false"


Cls="input-height" BlankText="Mailing County is required" InvalidClass="error"


ItemCls="required" />


</ext:Anchor>


</ext:FormLayout>


</Body>


</ext:FieldSet>


<ext:FieldSet ID="FieldSet2" runat="server" CheckboxToggle="true" Title="Physical same as mailing?"


AutoHeight="true" Collapsible="false" Collapsed="false" Width="550"


BodyStyle="padding:2px 4px 4px 10px !important;" LabelSeparator=""


LabelStyle="padding:0px 0px 0px 0px !important; width:0px !important;">


<Body>


<ext:FormLayout ID="FormLayout2" runat="server" LabelAlign="Top">


<ext:Anchor Horizontal="80%">


<ext:TextField ID="PhysicalAddressLine1" runat="server" FieldLabel="Address1" AllowBlank="false"


Cls="input-height" BlankText="Physical Address is required" InvalidClass="error"


ItemCls="required" Width="250" />


</ext:Anchor>


<ext:Anchor Horizontal="80%">


<ext:TextField ID="PhysicalAddressLine2" runat="server" FieldLabel="Address2" AllowBlank="false"


Cls="input-height" BlankText="Physical Address is required" InvalidClass="error"


ItemCls="required" />


</ext:Anchor>


<ext:Anchor Horizontal="90%" IsFormField="true">


<ext:MultiField ID="MultiField2" runat="server" 


LabelSeparator="" LabelStyle="padding:0px 0px 0px 0px !important; width:0px !important;">


<Fields>


<ext:TextField ID="PhysicalCity" runat="server" FieldLabel="PhysicalCity" AllowBlank="false"


Cls="input-height" BlankText="Physical City is required" InvalidClass="error"


ItemCls="required" NoteAlign="Top" Note="City:" NoteCls="labelcls"/>


<ext:TextField ID="PhysicalState" runat="server" FieldLabel="PhysicalState" AllowBlank="false"


Cls="input-height" BlankText="Physical State is required" InvalidClass="error"


ItemCls="required" NoteAlign="Top" Note="State:" NoteCls="labelcls" />


<ext:TextField ID="PhysicalZip" runat="server" FieldLabel="PhysicalZip" AllowBlank="false"


Cls="input-height" BlankText="Physical Zip is required" InvalidClass="error" ItemCls="required" 


NoteAlign="Top" Note="Zip:" NoteCls="labelcls"/>


</Fields>


</ext:MultiField>


</ext:Anchor>


<ext:Anchor Horizontal="24%">


<ext:TextField ID="PhysicalCounty" runat="server" FieldLabel="County" AllowBlank="false"


Cls="input-height" BlankText="Physical County is required" InvalidClass="error"


ItemCls="required" />


</ext:Anchor>


</ext:FormLayout>


</Body>


<AjaxEvents>


<Collapse OnEvent="FieldSet1_Collapse" />


<Expand OnEvent="FieldSet1_Expand" />


</AjaxEvents>


</ext:FieldSet>


</ext:ContainerLayout>


</Body>


</ext:Panel>





</Body>


</ext:FormPanel>


</Body>


<BottomBar>


<ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready..." StatusAlign="Left">


<%--


<Plugins>


<ext:ValidationStatus ID="ValidationStatus1" runat="server" 


ValidIcon="Accept" ErrorIcon="Exclamation" />


</Plugins>


--%>


</ext:StatusBar>


</BottomBar>


<Listeners>


<%-- this fixes the HACK where we need to set focus to control in order to repaint screen because of status bar not positionning 


<Render Handler="#{FormStatusBar}.el.repaint();" />


--%>


<Show Handler="#{FormStatusBar}.setStatus({text: 'Loading-1...', iconCls: 'icon-exclamation'});" />


</Listeners>


<TopBar>


<ext:Toolbar ID="Toolbar1" runat="server" Flat="true" >


<Items>


<ext:ToolbarButton ID="btnSave" runat="server" Text="Save" Icon="Disk">


<AjaxEvents>


<Click OnEvent="UpdateRecord" Before="var valid= #{formPanel}.getForm().isValid(); if(valid){#{FormStatusBar}.showBusy('Saving form...');} return valid;"


Success="RefreshGrid();Ext.Msg.alert('Event', result.extraParamsResponse.failure);"


Failure="Ext.Msg.show({ 


title : 'Error', 


msg : String.format(' [{0}] ', result.errorMessage), 


minWidth: 200, 


modal : true, 


icon : Ext.Msg.ERROR, 


buttons : Ext.Msg.OK 


});">


<EventMask ShowMask="true" MinDelay="1000" Target="CustomTarget" CustomTarget="={#{formPanel}.getEl()}" />


</Click>


</AjaxEvents>


<Listeners>


<Click Handler="saveFormPanelFields(formPanel);" />


</Listeners>


</ext:ToolbarButton>


<ext:ToolbarSeparator />


<ext:ToolbarButton ID="ToolbarButton2" runat="server" Text="Cancel" Icon="Decline" OnClientClick="parent.top.window.topwindow.hide();">


</ext:ToolbarButton>


<ext:ToolbarSeparator />


<ext:ToolbarButton ID="ToolbarButton1" runat="server" Text="Reset" Icon="Reload" MenuAlign="Right">


<Listeners>


<Click Handler="#{formPanel}.getForm().reset();" />


</Listeners>


</ext:ToolbarButton>


</Items>


</ext:Toolbar>


</TopBar>


</ext:Panel>


</Center>


</ext:BorderLayout>


</Body>


</ext:ViewPort>
  2. #2
    Jan 25, 2010, 8:17 PM

    RE: [CLOSED] width not set in FormLayout

    Hi idriss,

    If you do not set an Anchor Horizontal value, then the width of the Field will be calculated with from it's .Width value.


    If you set an Anchor Horizontal value, then the Fields .Width will be ignored.


    Hope this helps. If it does not help, maybe post a simplified .aspx code sample which uses the minimum components necessary to reproduce the problem/scenario. I spent a couple moments reviewing your sample, but wasn't really sure what I should be looking at.


    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
  3. #3
    Jan 25, 2010, 8:39 PM

    RE: [CLOSED] width not set in FormLayout

    thanks. that worked. please mark as solved.
    idriss

Similar Threads

  1. GridPanel - Column header width is bigger than cell width
    By crsodre in forum 1.x Help
    Replies: 1
    Last Post: Jun 11, 2012, 11:59 AM
  2. Column head's width is bigger than cell width in ALL grids.
    By retto in forum 1.x Help
    Replies: 1
    Last Post: Jun 04, 2012, 3:48 PM
  3. [CLOSED] Grid Panel : Column width (Auto width)
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 24, 2011, 8:31 PM
  4. [FIXED] Editable GridPanel textfield editor width does not fit column width
    By jchau in forum Bugs
    Replies: 6
    Last Post: Jun 11, 2010, 12:47 PM
  5. In GridPanel, why column head's width is bigger than cell width?
    By sunny_sh in forum 1.x Help
    Replies: 4
    Last Post: Aug 04, 2009, 11:37 AM

Posting Permissions