[CLOSED] column layout question

Support,

see example. I want the yyyy textbox on the SECOND row, not the first. how can i add a spacer to push it down?
i dont want anything in it's place, i want it blank,

thanks,
/Z

Code:

<%@ Page Language="C#" %> <%@ Import Namespace="Crystal" %> <%@ Import Namespace="Crystal.Models" %> <!DOCTYPE html> <html> <body> <form runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server"> </ext:ResourceManager> <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Center" Pack="Start" /> </LayoutConfig> <Items> <ext:FormPanel ID="Form1" runat="server" Title="Information" BodyPadding="5" ButtonAlign="Right" Layout="Column"> <Items> <ext:Panel runat="server" Border="false" Header="false" Layout="Form" ColumnWidth=".33" LabelAlign="Top"> <Defaults> <ext:Parameter Name="MsgTarget" Value="side" /> </Defaults> <Items> <ext:TextField ID="rrrr" runat="server" AllowBlank="false" FieldLabel="rrrrr" Vtype="alpha" AnchorHorizontal="92%" /> <ext:TextField ID="TextField1" runat="server" AllowBlank="false" FieldLabel="rrrrr" Vtype="alpha" AnchorHorizontal="92%" /> </Items> </ext:Panel> <ext:Panel runat="server" Border="false" Header="false" Layout="Form" ColumnWidth=".33" LabelAlign="Top"> <Defaults> <ext:Parameter Name="MsgTarget" Value="side" /> </Defaults> <Items> <ext:TextField ID="tttt" runat="server" FieldLabel="ttttt" Vtype="alpha" AllowBlank="true" AnchorHorizontal="92%" MaxLengthText="1" /> <ext:TextField ID="TextField2" runat="server" FieldLabel="ttttt" Vtype="alpha" AllowBlank="true" AnchorHorizontal="92%" MaxLengthText="1" /> </Items> </ext:Panel> <ext:Panel runat="server" Border="false" Layout="Form" ColumnWidth=".33" LabelAlign="Top"> <Defaults> <ext:Parameter Name="MsgTarget" Value="side" /> </Defaults> <Items> <ext:TextField ID="yyyy" runat="server" FieldLabel="yyyy" Vtype="alpha" AllowBlank="false" AnchorHorizontal="92%" /> </Items> </ext:Panel> </Items> </ext:FormPanel> </Items> </ext:Viewport> </form> </body> </html>

also, if i nest FormPanels, the ValidityCheck must be at each child levels. How can i make a top level ValidityCheck work? Same for getForm().getFieldValues()? How can i have it apply to all child forms.
thanks,
/Z

Hello @Z!

Thanks for providing a test case depicting your scenario!

As for the alignment of the 'yyyy' field, there are several ways to attain this, not all them may fit your actual test case although they can fit the test case you provided.

Some of the ways in general would be:
1. Shifting down the panel with fields to the position you want.
2. Bottom-aligning the panel
3. Using "spacers" between fields (useful if you need several rows and several given "blanks" throughout the line)

For each example on how to attain the layout, refer to your original test case code; e.g. changes for (1) won't be preserved on (2), etc.

For (1), it can be done by giving the panel a fixed margin to the top, so that it aligns exactly to the field below. To do so, change the panel definition in line 51 of your test case, adding this: StyleSpec="margin-top: 42px".

For (2), from the FormPanel definition in your code, remove the Layout="Column" and add this block within itself:

Code:

<LayoutConfig> <ext:HBoxLayoutConfig Align="Bottom" /> </LayoutConfig>

Then, instead of having ColumnWidth=".33" in the immediately interior panels, use Flex="1" (this number is a weight, so if all have the same number, they will get the same width, use 2 in any to have a single double-width column).

And for (3), just create a container like this and add to the panel before/after/between the entries you want however you want them spaced:
3.1: Fixed-height: <ext:Container ID="Spacer1" runat="server" Height="32" />
3.2: Theme-aware height, matching the height of form entries: <ext:Container ID="Spacer1" runat="server" Cls="x-form-item-body-default" />

Well, these are just some alternatives on how to attain what you want. There are many many more alternatives by using different combinations on layouts. Hopefully one of these paths would give hints good enough to attain your objective or base on them.

As for the second question, validation should work if the panels are beneath the validity FormPanel. If not, you probably should implement custom validity handling, maybe in a similar fashion as discussed in the FormPanel ValidityChange thread.

I hope this helps!

Hello, @Z!

It's been a while since we replied here and still no feedback from you. Was the response above enough to help you solve the issue, or do you still need help with this? If so, please let us know how we might be able to help.

We may mark this thread as closed if you don't reply in 7+ days from now. As we don't lock up t he thread, you will still be able to post a follow-up here any time you feel fit.