Flex4 设置s:Combobox选项不可编辑

Flex4的combobox组件的选项是使用TextInput实现的;flex3的combobox组件的选项是使用Label实现的,所以Flex4的combobox组件的选项,今天项目的需要,要使用flex4的combobox组件设置选项不可编辑,其实这个挺简单的,原理就是设置textinput的editable="false",就可以了。

写一个皮肤ufmComboBoxTextInputEditSkin,主机组件是spark.components.ComboBox

<?xml version="1.0" encoding="utf-8"?>
<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

--> 
<!--- The default skin class for the Spark ComboBox component. 
The skin for the anchor button for a ComboBox component 
is defined by the ComboBoxButtonSkin class.  The skin for the text input
is defined by the ComboBoxTextInputSkin class.

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxButtonSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5"> 
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.ComboBox")]
        ]]>
    </fx:Metadata> 
    
 <!--
  NOTE: this skin file contains sub-parts that may continue to react to
  Style code.  To remove this behavior create new copies of those skins
  and remove the styles.
 -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    
    <!--- 
        The PopUpAnchor control that opens the drop-down list. 
        
        <p>In a custom skin class that uses transitions, set the 
        <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                   left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
        
        <!--- 
            This includes borders, background colors, scrollers, and filters. 
            @copy spark.components.supportClasses.DropDownListBase#dropDown
        -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
            
            <!-- drop shadow -->
            <!--- @private -->
            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                     angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
            
            <!-- border -->
            <!--- @private -->
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- @private -->
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>
            
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---  
                        @private
                        The color of the drop down's background fill.
                        The default color is 0xFFFFFF.
                    -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
            
            <!--- @private -->
            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
    
    <!---  The default skin is ComboBoxButtonSkin. 
            @copy spark.components.supportClasses.DropDownListBase#openButton
            @see spark.skins.spark.ComboBoxButtonSkin -->
    <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="spark.skins.spark.ComboBoxButtonSkin" />  
    <!--- @copy spark.components.ComboBox#textInput -->
    <s:TextInput id="textInput"
                 left="0" right="18" top="0" bottom="0" editable="false" text="请选择" 
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 
    
</s:SparkSkin>

第二步:添加皮肤就可以了

install.setStyle("skinClass",ufmComboBoxTextInputEditSkin);

转载于 http://blog.163.com/ask_rent@yeah/blog/static/1398936632011574514849/

你可能感兴趣的:(Flex,dropdown,Adobe,button,colors,distance)