[CLOSED] [1.0] Initially Hidden fields in CompositeField do not render properly on becoming visible

[r_honey]

Hi think, this might be a bug with ExtJs itself instead of Ext.Net.

But here's the code to reproduce it:

    <ext:CompositeField runat="server">
		<Items>
			<ext:DateField runat="server" />
			<ext:Checkbox runat="server" ID="chk" BoxLabel="Checkbox" Hidden="true" />
		</Items>
    </ext:CompositeField>
    <ext:Button runat="server" Text="Click" OnClientClick="#{chk}.show();" />

As you can see, the Checkbox overlaps with the Datefield on becoming visible. There was no such issue with MultiFields that have been deprecated now.


My work-around currently is to specify "margin-left: 120px" for the StyleSpec of the CheckBox.

[Vladimir]

Hi,

Yes, BoxLayout (HBox/VBox) don't like hidden items (composite field uses HBox). I need investigate the code of the HBox class

I can suggest another workaround

<ext:CompositeField runat="server" Width="500">
            <Items>
                <ext:DateField runat="server" />
                <ext:Checkbox runat="server" ID="chk" BoxLabel="Checkbox" Cls="x-hidden" />
            </Items>
        </ext:CompositeField>
        <ext:Button runat="server" Text="Click" OnClientClick="#{chk}.removeClass('x-hidden');#{chk}.wrap.removeClass('x-hidden');" />

[r_honey]

Hi vlad, what's wrap doing on the CheckBox above? I could not find any Extjs doc about wrap on Checkbox or BoxLayout??

[Vladimir]

Hi,

Well, at this moment I don't think that it is bug because you have to call 'doLayout' after show/hide items

<ext:CompositeField ID="Field1" runat="server">
            <Items>
                <ext:DateField runat="server" />
                <ext:Checkbox runat="server" ID="chk" BoxLabel="Checkbox" Hidden="true" />
            </Items>
        </ext:CompositeField>
        <ext:Button runat="server" Text="Click" OnClientClick="#{chk}.show();#{Field1}.innerCt.doLayout();" />

what's
wrap doing on the CheckBox above?
Many fields (for example, trigger fields) has wrapper element (just div which wraps whole field markup). 'wrap' is referencing
on that div