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>



也可以通过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>



也可以通过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>