Flex combox下拉图片的方法

摘要

Flex的combox组件是一个下拉列表的选择框,默认里面显示的只是文字item项,下面对combox进行了扩展,可以下拉显示图片数据。

先新建一个自定义的组件:

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                width.normal="57" height.normal="50"> 
                                           
    <s:states> 
        <s:State name="normal" /> 
        <s:State name="hovered" /> 
        <s:State name="selected" /> 
    </s:states> 
    <s:Rect left="0" right="0" top="0" bottom="0"> 
        <s:fill> 
            <s:SolidColor color="0x999999" alpha="0" alpha.hovered="0.2" 
                          alpha.selected="0.6" /> 
        </s:fill> 
    </s:Rect> 
    <s:VGroup id="vg" height.normal="50" horizontalAlign.normal="center" verticalAlign.normal="middle">
            <mx:Image  source="{data.imgePath}" width="50"  height="50"/>  
                                               
    </s:VGroup> 
                                           
</s:ItemRenderer>


在页面中直接调用该组件:

<s:Label x="22" y="257" fontWeight="normal" text="快捷键图标"/>
<s:ComboBox id="cb_imgpath" x="98" change="setImg()" initialize="cb_imgpath.textInput.editable=false" y="250" width="128" labelField="imgeName" color="0x000000" dataProvider="{arryImg}"
itemRenderer="cn.ccb.yn.acms.compoent.comBoxImg" selectedIndex="0">


IT家园
IT家园

网友最新评论 (0)