2009-12-02 31 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>