How to change default's mx:Form layout?

I need an horizontal layout on my forms, they look like this:

<mx:Form id="myForm" width="100%">
    <mx:FormItem label="Color">
        <s:ComboBox id="color"> 
            <s:dataProvider>
                <mx:ArrayList>
                    <fx:String>Red</fx:String>
                    <fx:String>Orange</fx:String>
                    <fx:String>Yellow</fx:String>开发者_如何学Go
                    <fx:String>Blue</fx:String>
                    <fx:String>Green</fx:String>
                </mx:ArrayList>
            </s:dataProvider>
        </s:ComboBox>
    </mx:FormItem>
</mx:Form>

I'm very confused about the new Flex 4 architecture...

By default, the Form component will always layout its children vertically. If you want a horizontal layout instead, you'll have to extend the Form class. Try this:

HorizontalForm.as

package
{
    import mx.containers.BoxDirection;
    import mx.containers.Form;
    import mx.core.mx_internal;

    public class HorizontalForm extends Form
    {
        public function HorizontalForm()
        {
            super();
            mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL;
        }
    }
}