2009-12-02 58 views
3

我有一个宽度设置为100%的组合框。然而,当它的一个元素更大时,组合框会变得更大,在我的应用程序中创建滚动条和其他丑陋! 如何让父组件中包含组合框?
注意,只要闭合组合框保持较小,下拉列表就会变大。MXML:组合框宽度大于父宽度

样品:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> 
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart --> 
    <mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8"> 
     <!-- This label should align with the labels in the left form --> 
     <mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" /> 
     <!-- This textbox should spread accross both forms, that's why it's in a seperate HBox --> 
     <mx:TextInput height="20" width="100%" /> 
    </mx:HBox> 

    <mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}"> 

     <mx:Form id="leftForm" width="50%"> 
      <!-- Personal details --> 
      <mx:FormHeading label="Personal Details" width="100%" /> 
      <mx:FormItem label="First name" width="100%"> 
       <mx:TextInput text="{person.firstName}" width="100%"/> 
      </mx:FormItem> 
      <mx:FormItem label="Last name" width="100%"> 
       <mx:TextInput text="{person.lastName}" width="100%"/> 
      </mx:FormItem> 
      <!-- And 15 more formItems :) --> 
     </mx:Form> 

     <mx:Form id="rightForm" width="50%"> 
      <!-- Address --> 
      <mx:FormHeading label="Address" width="100%" /> 
      <mx:FormItem label="Street" width="100%"> 
       <mx:TextInput text="{person.address.street}" width="100%"/> 
      </mx:FormItem> 
      <mx:FormItem label="City" width="100%"> 
       <mx:TextInput text="{person.address.city}" width="100%"/> 
      </mx:FormItem> 

      <mx:FormItem label="Country" width="100%"> 

       <!-- This combobox right here is the troublemaker. There's a 
        country named 'South Georgia and the South Sandwich 
        Islands' consising of a few small islands in the southern 
        pacific and a name which is too long for my innocent 
        unsuspecting combobox --> 
       <form:ComboBox id="countryCombo" height="20" width="100%" 
         dataProvider="{model.systemDataModel.countries}" /> 
      </mx:FormItem> 
      <!-- And 15 more formItems :) --> 
     </mx:Form> 
    </mx:HBox> 
</mx:Canvas> 
+0

您是否有一些示例代码可以显示该问题? – 2009-12-02 15:24:30

回答

3

您可以改用minWidth。将其设置为零或其他低值。我知道它适用于像HBox和VBox这样的容器,使它们的停止增长比父容器更大,所以它也可以用于ComboBox。基本上,会发生什么情况是minWidth =“0”会覆盖measuredMinWidth,它是父容器通常尊重的最小可能大小的值,并且可能大于容器自身的边界。

+0

谢谢。这让我头痛不已。很高兴知道有一个快速解决方案。 – 2009-12-18 12:40:49

0

您可以使用maxWidth属性以绝对尺寸(像素),但是该组合框的项目(这是较大的,则组合框)的一部分将被裁剪。

从Adobe: 组合框的默认大小: 宽度足以适应主控件显示区域中下拉列表上的最长条目以及下拉按钮。当下拉列表不可见时,默认高度基于标签文字大小。

+0

嗯,但我希望组合的宽度尽可能宽,这取决于窗体项目的大小和标签宽度,所以我无法修复宽度。它应该是其母公司的100%,不多也不少。 – 2009-12-02 15:50:13

2

我有同样的问题,我很容易解决。我有一个国家组合框和一个状态组合框组件,并动态填充国家名称,另一个与国家有关......我有两个表格在HBox内显示“两列”形式和右侧形式内有一个formItem和formItem里面的comboBox。问题是当我把组合框的dataProvider,然后滚动条出现,这是非常恶心...

解决方案:我告诉你只是正确的窗体,因为它是问题(autoLayout =“假”在窗体和minWidth =“0”在组合框定义中)

<mx:Form autoLayout="false" verticalGap="12"> 
    <mx:FormItem label="Country" required="false" width="100%" direction="vertical"> 
     <mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="@name"/> 
    </mx:FormItem> 
    <mx:FormItem label="State" required="false" width="100%" direction="vertical"> 
     <mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="@name"/> 
</mx:FormItem> 
</mx:Form>