[CLOSED] AutoSize issues with DateField contained in an HBox, when changing its ReadOnly flag

  1. #1

    [CLOSED] AutoSize issues with DateField contained in an HBox, when changing its ReadOnly flag

    Hi,
    I am experiencing this issue when changing the readOnly status of a DateField control that is contained on a HBox container: in this case a Viewport.

    Basically at each toggle of "setReadOnly" the width of the field reduces until disappears from the UI... if you resize the browser, the layout is correctly recalculated.

    Here is the sample code. We're using Ext.Net 1.7. Thank you for help.

    <ext:ViewPort Layout="HBoxLayout" runat="server" >
           <LayoutConfig>
               <ext:HBoxLayoutConfig Align="Stretch" />
           </LayoutConfig>
           <Items>
               <ext:DateField ID="DateField1" runat="server" FieldLabel="Date 1" Flex="1" />
               <ext:TextField ID="TextField1" runat="server" FieldLabel="Text 1" Flex="1" />
               <ext:TextField ID="TextField2" runat="server" FieldLabel="Text 2" Flex="1" />
    
               <ext:Button Text="Toggle ReadOnly" Width="100" runat="server" >
                   <Listeners>
                       <Click Handler="#{DateField1}.setReadOnly(!#{DateField1}.readOnly);" />
                   </Listeners>
               </ext:Button>
           </Items>
       </ext:ViewPort>
    Last edited by Daniil; Sep 03, 2013 at 4:39 AM. Reason: [CLOSED]
  2. #2
    Hi @adrianot,

    The issue is caused by the fact that FieldLabel support is low when it is out of FormLayout context. Originally in ExtJS, FieldLabel should be used within FormLayout context only. I would recommend to follow that rule.

    Example
    <ext:ViewPort runat="server" >
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Items>
            <ext:Container runat="server" Flex="1"  Layout="FormLayout" DefaultAnchor="100%">
                <Items>
                    <ext:DateField ID="DateField1" runat="server" FieldLabel="Date 1" />
                </Items>
            </ext:Container>
    
            <ext:Container runat="server" Flex="1"  Layout="FormLayout" DefaultAnchor="100%">
                <Items>
                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Text 1" />
                </Items>
            </ext:Container>
                   
            <ext:Container runat="server" Flex="1"  Layout="FormLayout" DefaultAnchor="100%">
                <Items>
                    <ext:TextField ID="TextField2" runat="server" FieldLabel="Text 2"  />
                </Items>
            </ext:Container>
     
            <ext:Button Text="Toggle ReadOnly" Width="100" runat="server" >
                <Listeners>
                    <Click Handler="#{DateField1}.setReadOnly(!#{DateField1}.readOnly);" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:ViewPort>
  3. #3
    Thank you Daniil.

    One question: do you think that adding so many container levels could slow down a form with about 40/50 fields?

    Thank you again!
  4. #4
    Yes, it might slow down the page. However, I cannot say how much. It would be best to measure the performance cost. In my opinion it should not be much.
  5. #5
    That's fine I'll try to see what happens.

    Thank you

Similar Threads

  1. Replies: 1
    Last Post: Sep 23, 2011, 8:42 AM
  2. [CLOSED] DateField timezone issues
    By daneel in forum 1.x Premium Help
    Replies: 6
    Last Post: Mar 24, 2011, 10:37 PM
  3. [CLOSED] ComboBox and DateField as readonly
    By Sharon in forum 1.x Premium Help
    Replies: 1
    Last Post: May 12, 2009, 9:05 AM
  4. Datefield Readonly not working
    By EzaBlade in forum 1.x Help
    Replies: 0
    Last Post: Feb 12, 2009, 9:28 AM
  5. DateField Readonly
    By jeybonnet in forum Bugs
    Replies: 0
    Last Post: Jan 09, 2009, 6:57 AM

Tags for this Thread

Posting Permissions