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

Code:

---

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

---

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

Code:

---

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

---

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!

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.

That's fine I'll try to see what happens.

Thank you