Multi column forms in Adobe Flex

Go To StackoverFlow.com

0

What is the best way to make a multi column form in Flex?

My current solution if more than one column is required is to put the form items inside an <s:HGroup> but the alignment isn't the best.

Is there a better way?

Thank you, Fred

2012-04-04 03:20
by fred basset


3

I haven't had a chance to really explore the new Spark Form controls, but one thing they do is re-introduce constraint columns and rows. Perhaps they were under-used in Flex 3, but I was sad to see them go in Flex 4.

You should be able to setup some rows and columns to lay the form elements out and keep things aligned between columns this way.

Some Adobe resources:

2012-04-04 07:12
by Sunil D.
The reason why constraint columns and rows are out in Flex 4 is because you can easily define your own Layout. In fact, the FormItemLayout extends ConstraintLayout, which will allow you to mimic what you describe above - Dennis Jaamann 2012-04-04 07:17


1

How about using the grid control. Not the same performance as using Hbox/Hgroup but still will do what you need. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/Grid.html#includeExamplesSummary

<s:VGroup left="10" right="10" top="10" bottom="10">
        <s:Label width="100%" color="blue" 
            text="A 3 by 3 Grid container of Button controls."/>

        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </s:VGroup>
2012-04-04 08:33
by Adrian Pirvulescu
Ads