如何對齊formItems？

我想創建一個表單，但我有問題對齊formItems。如何對齊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>

它現在看起來像這樣。

Current

但我希望它看起來像這樣

Desired

來源

2013-08-28 Peter

這是什麼'form'命名空間？你是使用mx Form，Spark Form還是一些第三方組件？從代碼中無法判斷。 – RIAstar

道歉，其mx：表單 - xmlns：mx =「http://www.adobe.com/2006/mxml」編輯該問題。 – Peter

我建議刪除額外的「VBox/HBox」組件，並使用Form容器。然後看看你的立場。如果你真的想/需要VBox/HBox他們應該在一個FormItem。在很多情況下，您可以使用mx：FormItem方向屬性來控制佈局。 – JeffryHouser

使用下面的代碼：請根據您的對齊要求調整墊片的寬度。另外不要錯過提及formItem內部每個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>

來源

2014-01-01 10:59:27 Bhalchandra

如何對齊formItems？

回答

相關問題