Flex button icon动态设置

 

       前段时间写了个datagrid的多列下拉选取控件: MultiDropDownItemEditor，该itemeditot实际上就是一个Hbox包含了一个文本框及按钮，如下所示：

<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"        xmlns:s="library://ns.adobe.com/flex/spark"        xmlns:mx="library://ns.adobe.com/flex/mx"         height="23" width="120" horizontalAlign="center" horizontalGap="1"        paddingTop="0" paddingBottom="0" verticalGap="0"        implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="init()">     <s:TextInput id="_text" width="100%" height="100%" x="0" y="0" editable="false" paddingBottom="0" paddingTop="0"/>     <mx:Button id="button1" label="" width="20" height="100%" click="button1_clickHandler(event)" /> </mx:HBox>

       一开始，按钮button1的下拉图标是用graphics自己画了个黑色三角形，但是实际运用过程当中却发现，明明画的是黑色三角形，显示的却是灰色三角形，画三角形代码如下：

var g:Graphics = button1.graphics;               g.beginFill(0x000000,1);               g.moveTo(5,7);               g.lineTo(15,7);               g.lineTo(10,15);               g.lineTo(5,7);               g.endFill();

 

       正常黑色下拉图标的按钮却被显示成灰色下拉按钮，用户还以为该按钮不能使用呢，已经误导用户正常使用表格的多列下拉，迫于时间关系，就没去深究为什么Graphics填充的明明是黑色，却显示成灰色，第一反应应该是button的默认css惹的祸。

    于是，通过设置button的icon style来变通实现按钮的下拉图标，操作如下：

       1）准备2张png图片，分别是黑色下拉图标和灰色下拉图标；

       2）预定义icon，如下：

           [Bindable]

           [Embed(source="assets/tool_updown.png")]

           private var updown_enable:Class;

          

           [Bindable]

           [Embed(source="assets/Snap2gray.png")]

           private var updown_disable:Class;

    3）根据条件设置button1的icon为updown_disable或updown_enable，如下：

    btnOK.setStyle("icon",updown_enable);