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);