如何对齐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？

回答

相关问题