ComboBox控件的borderColor样式学习.
示例:
代码:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-combobox-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="borderColor:" >
< mx:ColorPicker id ="colorPicker" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} "
borderColor =" {colorPicker.selectedColor} " />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-combobox-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="borderColor:" >
< mx:ColorPicker id ="colorPicker" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} "
borderColor =" {colorPicker.selectedColor} " />
</ mx:Application >
也可以通过css实现:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-combobox-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Style >
ComboBox {
borderColor: red;
}
</ mx:Style >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} " />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-combobox-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Style >
ComboBox {
borderColor: red;
}
</ mx:Style >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} " />
</ mx:Application >
也可以通过AS的内部函数实现
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-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.ColorPickerEvent;
private function colorPicker_change(evt:ColorPickerEvent):void {
comboBox.setStyle("borderColor", evt.color);
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="borderColor:" >
< mx:ColorPicker id ="colorPicker"
change ="colorPicker_change(event);" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} " />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/09/setting-a-border-color-on-the-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.ColorPickerEvent;
private function colorPicker_change(evt:ColorPickerEvent):void {
comboBox.setStyle("borderColor", evt.color);
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="One" />
< mx:Object label ="Two" />
< mx:Object label ="Three" />
< mx:Object label ="Four" />
< mx:Object label ="Five" />
< mx:Object label ="Six" />
</ mx:Array >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="borderColor:" >
< mx:ColorPicker id ="colorPicker"
change ="colorPicker_change(event);" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:ComboBox id ="comboBox"
dataProvider =" {arr} " />
</ mx:Application >