Specifying a custom icon function on a ComboBox control in Flex
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/13/specifying-a-custom-icon-function-on-a-combobox-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.DropdownEvent; [Embed("assets/status_online.png")] private var statusOnline:Class; private function comboBox_open(evt:DropdownEvent):void { comboBox.dropdown.iconFunction = comboBoxDropdown_func; } private function comboBoxDropdown_func(item:Object):Class { if (item.hasOwnProperty("online") && item.online) { return statusOnline; } return null; } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="One" online="true" /> <mx:Object label="Two" /> <mx:Object label="Three" online="true" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" online="true" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> <mx:Object label="Ten" /> </mx:Array> <mx:ComboBox id="comboBox" dataProvider="{arr}" open="comboBox_open(event);" /> </mx:Application>
Setting the selected item background color on a ComboBox control in Flex
<mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="selectionColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ComboBox id="comboBox" dataProvider="{arr}" selectionColor="{colorPicker.selectedColor}" /> Setting the text roll over color on a ComboBox control in Flex
设置鼠标滚动到上面的文本字体颜色
<mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="textRollOverColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#FF0000" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ComboBox id="comboBox" dataProvider="{arr}" textRollOverColor="{colorPicker.selectedColor}" /> Using a CheckBox control as a list item renderer in Flex
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:vo="*" layout="horizontal" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.events.CollectionEvent; import mx.utils.ObjectUtil; private function init():void { arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE)); } private function arrColl_collectionChange(evt:CollectionEvent):void { try { var tArr:Array = arrColl.source.filter(selectedOnly); textArea.text = ObjectUtil.toString(tArr); lbl.text = tArr.length.toString() + " item(s) selected"; } catch (err:Error) { // ignore. } } private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean { return item.isSelected; } ]]> </mx:Script> <mx:Array id="arr"> <vo:ListItemValueObject label="One" isSelected="true" /> <vo:ListItemValueObject label="Two" isSelected="true" /> <vo:ListItemValueObject label="Three" isSelected="true" /> <vo:ListItemValueObject label="Four" isSelected="true" /> <vo:ListItemValueObject label="Five" isSelected="false" /> <vo:ListItemValueObject label="Six" isSelected="false" /> <vo:ListItemValueObject label="Seven" isSelected="false" /> <vo:ListItemValueObject label="Eight" isSelected="false" /> <vo:ListItemValueObject label="Nine" isSelected="false" /> <vo:ListItemValueObject label="Ten" isSelected="false" /> <vo:ListItemValueObject label="Eleven" isSelected="false" /> <vo:ListItemValueObject label="Twelve" isSelected="false" /> </mx:Array> <mx:ArrayCollection id="arrColl" source="{arr}" collectionChange="arrColl_collectionChange(event);" /> <mx:Panel id="panel" title="Items" status="{arrColl.length} total" styleName="opaquePanel"> <mx:List id="list" dataProvider="{arrColl}" alternatingItemColors="[#EEEEEE, white]" width="150" rowCount="8"> <mx:itemRenderer> <mx:Component> <mx:CheckBox selectedField="isSelected" change="onChange(event);"> <mx:Script> <![CDATA[ private function onChange(evt:Event):void { data.isSelected = !data.isSelected; } ]]> </mx:Script> </mx:CheckBox> </mx:Component> </mx:itemRenderer> </mx:List> <mx:ControlBar horizontalAlign="right"> <mx:Label id="lbl" /> </mx:ControlBar> </mx:Panel> <mx:TextArea id="textArea" verticalScrollPolicy="on" width="100%" height="{panel.height}" /> </mx:Application>/** * http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ */ package { public class ListItemValueObject { [Bindable] public var label:String; [Bindable] public var isSelected:Boolean; public function ListItemValueObject() { super(); } } }