Flex的Combobox組件（Prompt屬性、文字過長...特性）

原文地址：http://joe-feng.iteye.com/blog/1402008

1、顯示提示
設置Prompt屬性可以爲Combobox添加一個默認提示。如果沒有設置selectedIndex，默認selectedIndex=-1，就顯示Prompt的內容。
Flex3如果不設置Prompt，默認選擇第一項。Flex4如果不設置Prompt，那麼默認是空的。

2、處理文字過長
Flex4中的Combobox文字過長時，會顯示滾動條。我們討論Flex3如何處理文字過長的問題。
設置其itemRenderer爲Label即可顯示出省略號和ToolTip。幾乎所有含有標籤的組件遇到文字過長的問題都可以用該方法解決。
<mx:ComboBox itemRenderer="mx.controls.Label"/>
另外還可以設置下拉列表的寬度：
<mx:ComboBox dropdownWidth="300" />

 

3、允許下拉列表顯示多行文字
設置itemRenderer爲mx.controls.Text即可。有的文章說還需要在open事件中獲得Combobox.dropDown獲取下 拉列表的引用。然後設置下拉列表的variableRowHeight爲true。實際實現只需設置itemRenderer即可。

 

protected function cb_openHandler(event:DropdownEvent):void
{
  cb.dropdown.variableRowHeight = true;
}
<mx:ComboBox id="cb" dataProvider="{ac}" width="200"
    open="cb_openHandler(event)" itemRenderer="mx.controls.Text"/>

 

4、爲下拉列表添加圖標

[Embed("assets/1.png")]
private var pngClass:Class;
private function cb_openHandler(event:DropdownEvent):void
{
    cb.dropdown.variableRowHeight = true;
    cb.dropdown.iconFunction = iconFunc;
}
private function iconFunc(item:Object):Class{
    return pngClass;
}
<mx:ComboBox id="cb" dataProvider="{ac}" labelField="value" open="cb_openHandler(event)" />

 

5、創建聯動的Combobox

 

[Bindable]
private var myXML:XML =
<root>
<parent name="大類1">
<child name="大類1-小類1"/>
<child name="大類1-小類2"/>
<child name="大類1-小類3"/>
</parent>
<parent name="大類2">
<child name="大類2-小類1"/>
<child name="大類2-小類2"/>
<child name="大類2-小類3"/>
</parent>
</root>
<mx:ComboBox id="cb1" dataProvider="{myXML.parent}" labelField="@name"/>
<mx:ComboBox id="cb2" dataProvider="{cb1.selectedItem.child}" labelField="@name"/>

 

 

6、其他特性

  openEasingFunction和closeEasingFunction用於設置彈出和關閉下拉列表時的動畫效果，這對於其他含有下拉列表的組件也適用，比如ColorPicker。

  openDuration和closeDuration用於設置彈出和關閉下拉列表的動畫持續時間。

  editable用於設置是否可以編輯，默認是false

  rowCount用於設置下拉列表顯示的最大行數，如果實際數據超過最大行數，則顯示滾動條

  open方法在打開下拉列表時觸發，close方法在關閉下拉列表時觸發