formItems를 정렬하는 방법은 무엇입니까?

Question

양식을 만들려고하는데 formItems를 정렬 할 때 문제가 있습니다.

이것은 mx : Form 네임 스페이스입니다. (xmlns : mx = "http://www.adobe.com/2006/mxml")

이 문제를 해결하는 방법에 대한 제안 사항이있는 사람이 있습니까? 어떤 도움이라도 대단히 감사하겠습니다.

 <mx:VBox paddingLeft="0" height="100%"> 
     <form:Form width="100%" 
        textAlign="left"> 

      <mx:VBox> 

       <mx:HBox id="snapShotSelect"> 

        <form:FormItem label="My Label Here" 
             includeInLayout="{model.formItemVisible}" 
             visible="{model.formItemVisible}"/> 

        <mx:VBox> 
         <form:FormItem includeInLayout="{model.formItemVisible}" 
              visible="{model.formItemVisible}"> 
          <components:SageTextInput textAlign="left"/> 

         </form:FormItem> 

         <form:FormItem label="" 
              visible="{model.formItemVisible}" 
              includeInLayout="{model.formItemVisible}"/> 

         <form:FormItem visible="{model.formItemVisible}" 
              includeInLayout="{model.formItemVisible}"> 
          <components:SageList id="snaps" 
               allowMultipleSelection="false" 
               width="200" 
               rowCount="5"/> 

         </form:FormItem> 
        </mx:VBox> 
       </mx:HBox> 

       <mx:HBox> 
        <form:FormItem label="My Label Here" 
             width="100%" 
             visible="{model.formItemVisible}" 
             includeInLayout="{model.formItemVisible}"/> 

        <form:FormItem label="" 
             width="100%"> 
         <components:SageComboBox dataProvider="{model.generations}" 
               textAlign="left" 
               enabled="{model.generations.length > 0}"/> 

        </form:FormItem> 
       </mx:HBox> 

       <mx:HBox id="radioSelectGroup"> 
        <form:FormItem label=""> 
         <components:SageRadioButtonGroup id="rbGroup" 
                 groupId="rbGroup" 
                 labelPlacement="right"/> 
        </form:FormItem> 
       </mx:HBox> 

       <mx:HBox id="radioNew"> 
        <form:FormItem> 
         <components:SageRadioButton id="radioCopy" value="{model.RADIO_CREATE}" 
                group="{rbGroup}" 
                labelPlacement="right" 
                width="250" 
                label="Radio Button 1" /> 
        </form:FormItem> 

        <form:FormItem> 
         <components:SageTextInput textAlign="left" 
                enabled="{rbGroup.selectedValue == model.RADIO_CREATE}"/> 
        </form:FormItem> 
       </mx:HBox> 

       <mx:HBox id="radioExisting"> 

        <form:FormItem> 
         <components:SageRadioButton id="radioNoCopy" value="{model.RADIO_USE_EXISTING}" 
                group="{rbGroup}" 
                labelPlacement="right" 
                width="250" 
                label="Radio Button 2"/> 
        </form:FormItem> 

        <mx:VBox> 
         <form:FormItem label="" 
              paddingBottom="0"> 
          <components:SageTextInput textAlign="left" 
                 enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/> 
         </form:FormItem> 
         <form:FormItem label="" 
              indentationLevel="0" 
              paddingTop="0"> 
          <components:SageList allowMultipleSelection="false" 
               width="200" 
               rowCount="5" 
               enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/> 
         </form:FormItem> 
        </mx:VBox> 

       </mx:HBox> 

      </mx:VBox> 


    </form:Form> 
</mx:VBox> 

이것은 현재 이렇게 보입니다.

는하지만 그것은이

Answer 1

사용처럼 다음 코드를보고 싶지 : 당신의 정렬 요구 사항에 따라 스페이서의 폭을 조정하여주십시오. 또한 formBox 안에 모든 HBox 및 VBox의 폭을 언급하지 마십시오. 여기, 모든 mx 구성 요소를 사용하고 있습니다.

<mx:Form> 
     <mx:FormItem width="100%"> 
      <mx:VBox id="ContainerVBox" width="100%"> 
       <mx:HBox width="100%"> 
        <mx:Label id="label1" text="my label here"/> 
        <mx:Spacer width="10%"/> 
        <mx:TextInput id="textInput1" text="This is text input 1"/> 
       </mx:HBox> 
        <mx:TextInput id="textInput2" text="This is text input 2"/> 
      </mx:VBox> 


     </mx:FormItem> 

     <mx:FormItem width="100%"> 
      <mx:HBox width="100%"> 
       <mx:Label id="label1" text="my label here"/> 
       <mx:Spacer width="10%"/> 
       <mx:ComboBox id="myComboBox"/> 
      </mx:HBox> 
     </mx:FormItem> 

     <mx:FormItem width="100%"> 
      <mx:HBox width="100%"> 
       <mx:RadioButton id="myRadioButton"/> 
       <mx:Text text="Radio Button 1"/> 
       <mx:Spacer width="10%"/> 
       <mx:TextInput id="textInput3"/> 
      </mx:HBox> 
     </mx:FormItem> 

     <mx:FormItem width="100%"> 
      <mx:VBox width="100%"> 
       <mx:HBox width="100%"> 
        <mx:RadioButton id="myRadioButton"/> 
        <mx:Text text="Radio Button 2"/> 
        <mx:Spacer width="10%"/> 
        <mx:TextInput id="textInput4"/> 
       </mx:HBox> 
       <mx:TextInput id="textInput5" text="This is text input 5"/>  
      </mx:VBox> 

     </mx:FormItem> 

    </mx:Form> 
</mx:VBox>