Form layout and Anchors

[Zdenek]

Hello

I do not understand behavior of this code

<ext:Window ID="ViewPort1" runat="server" Width="500" Height="500" Layout="Fit" Plain="true">
		<Items>
	
			<ext:FormPanel ID="FormPanel1" runat="server" Frame="True">
				<Items>
					<ext:TextField ID="TextField1" runat="server" FieldLabel="label3" />
					<ext:TextField ID="TextField2" runat="server" FieldLabel="label2" />
					
                                         <ext:Panel runat="server" FieldLabel="Label 3" HideLabels="true" 
						StyleSpec="background:red;" Layout="Anchor">
						<Items>
							<ext:TextField ID="TextField3" runat="server" AnchorHorizontal="100%" />
							<ext:TextField ID="TextField4" runat="server" AnchorHorizontal="100%" />
						</Items>
					</ext:Panel>
				</Items>
			</ext:FormPanel>
                 </Items>
	</ext:Window>

my question is - why the ext:Panel gets full widht of parent window, while the both textfields above not? I expected the same width for all three items


Nothing has changed when I added

<Defaults>
        <ext:Parameter Name="Width" Value="250" Mode="Value"></ext:Parameter>
</Defaults>

when I added Width="250" to panel, I got nearly expected behavior, the only problem is that width of the inner textfields were 242 (I tried to seup Margin to 0 as well as padding, no success)

Finally I used VBox layout, and the Panel disappeared at all (I had to set fixed height in order to have it there)

<ext:Window ID="ViewPort1" runat="server" Width="500" Height="500" Layout="Fit" Plain="true">
		<Items>
			<ext:FormPanel ID="FormPanel1" runat="server" Frame="True">
				
				<Items>
					<ext:TextField ID="TextField1" runat="server" FieldLabel="label3" />
					<ext:TextField ID="TextField2" runat="server" FieldLabel="label2" />
					<ext:Panel runat="server" FieldLabel="Label 3" HideLabels="true"
						StyleSpec="background:red;"  >
						<LayoutConfig>
							<ext:VBoxLayoutConfig runat="server"/>
						</LayoutConfig>
						<Items>
							<ext:TextField ID="TextField3" runat="server" />
							<ext:TextField ID="TextField4" runat="server" />
						</Items>
					</ext:Panel>
				</Items>
			</ext:FormPanel>
		</Items>
	</ext:Window>

I prefer VBoxLayout over anchor layout, can it somehow render height of the panel according the child elements height?

I want to achieve this: Panel is in my application custom control , inherited from panel. I want to have that control with fluid width and height according the content ( as the number of items inside is dynamic).


Thanks
Zdenek

[geoffrey.mcgill]

my question is - why the ext:Panel gets full widht of parent window, while the both textfields above not?
I expected the same width for all three items

You should be able to set .DefaultAnchor="100%" on the <ext:FormPanel>. That will cause inner child Fields to render the full width of the Parent Container (ie. FormPanel).

Hope this helps.