플렉스 스파크 콤보 박스

Question

스파크 콤보 박스의 아래쪽 화살표를 제거해야합니다. 나는 이것처럼 mx 구성 요소를 할 수있다.

youcombobox instant.setStyle ("arrowButtonWidth", 0);

spark coobobox에서 어떻게 할 수 있습니까?

감사,

Answer 1

openButton을 숨기는 사용자 정의 스킨을 만드십시오. 이것은 필수 스킨 부분이므로 가시성을 false로 설정해야합니다.

<?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> 

    <fx:Script fb:purpose="styling"> 
     <![CDATA[  
      private var paddingChanged:Boolean; 
      private var cornerRadiusChanged:Boolean; 
      private var cornerRadius:Number = 0;    

      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ 
      static private const contentFill:Array = ["bgFill"]; 

      /** 
      * @private 
      */ 
      override public function get contentItems():Array {return contentFill}; 

      /** 
      * @private 
      */ 
      override protected function commitProperties():void 
      { 
       super.commitProperties(); 

       if (paddingChanged && textInput) 
       { 
        // Push padding styles into the textDisplay 
        var padding:Number; 

        padding = getStyle("paddingLeft"); 
        if (textInput.getStyle("paddingLeft") != padding) 
         textInput.setStyle("paddingLeft", padding); 

        padding = getStyle("paddingTop"); 
        if (textInput.getStyle("paddingTop") != padding) 
         textInput.setStyle("paddingTop", padding); 

        padding = getStyle("paddingRight"); 
        if (textInput.getStyle("paddingRight") != padding) 
         textInput.setStyle("paddingRight", padding); 

        padding = getStyle("paddingBottom"); 
        if (textInput.getStyle("paddingBottom") != padding) 
         textInput.setStyle("paddingBottom", padding); 
        paddingChanged = false; 
       } 

       if (cornerRadiusChanged) 
       { 
        cornerRadiusChanged = false; 

        /* var cr:Number = getStyle("cornerRadius"); 

        if (openButton) 
        openButton.setStyle("cornerRadius", cr); 
        if (textInput) 
        textInput.setStyle("cornerRadius", cr); */ 
       } 
      } 

      /** 
      * @private 
      */ 
      override public function styleChanged(styleProp:String):void 
      { 
       var allStyles:Boolean = !styleProp || styleProp == "styleName"; 

       super.styleChanged(styleProp); 

       if (allStyles || styleProp.indexOf("padding") == 0) 
       { 
        paddingChanged = true; 
        invalidateProperties(); 
       } 
       if (allStyles || styleProp == "cornerRadius") 
       { 
        cornerRadiusChanged = true; 
        invalidateProperties(); 
       }     
      } 

      /** 
      * @private 
      */ 
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
      { 
       if (getStyle("borderVisible") == false) 
       { 
        if (border) 
         border.visible = false; 
        if (background) 
        { 
         background.left = background.top = background.right = background.bottom = 0; 
        } 
        if (scroller) 
         scroller.minViewportInset = 0; 
       } 
       else 
       { 
        if (border) 
         border.visible = true; 
        if (background) 
        { 
         background.left = background.top = background.right = background.bottom = 1; 
        } 
        if (scroller) 
         scroller.minViewportInset = 1; 
       } 

       if (dropShadow) 
        dropShadow.visible = getStyle("dropShadowVisible"); 

       //openButton.setStyle("cornerRadius", getStyle("cornerRadius")); 

       if (borderStroke) 
       { 
        borderStroke.color = getStyle("borderColor"); 
        borderStroke.alpha = getStyle("borderAlpha"); 
       } 
       super.updateDisplayList(unscaledWidth, unscaledHeight); 
      } 
     ]]> 
    </fx:Script> 

    <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"> 

      <!-- 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" requestedMinRowCount="1" requestedMaxRowCount="6"/> 
        </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 --> 
<!---- my only change is here ----> 
     <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false" 
        skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" visible="false" /> 
     <!--- @copy spark.components.ComboBox#textInput --> 
     <s:TextInput id="textInput" enabled.disabled="false" 
        left="0" right="18" top="0" bottom="0" 
        skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 

    </s:SparkSkin> 

이처럼 사용하여 필요한 경우

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <s:ComboBox skinClass="com.flextras.skins.ComboBoxNoDownArrow"> 
     <s:dataProvider> 
      <mx:ArrayCollection> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
      </mx:ArrayCollection>   
     </s:dataProvider> 
    </s:ComboBox> 
</s:WindowedApplication> 

당신은 아마 피부 이상을 조정할 수 있습니다 예를 들어 textInput에서 "Right"값을 0으로 변경합니다. 대구를 작성하는 것보다 Flash Builder를 시작하는 데 더 많은 시간이 걸렸으므로, this documentation을 통해 읽어보고, Spark 아키텍처의 Skinning에 대한 참조로 읽어 보시기 바랍니다.