コンボボックスのカスタマイズ方法

コンボボックスをカスタマイズしてみました。
http://moeten.info/flex/20080707_combTest/bin-release/main.html

コンボボックスもitemRendererできるのでそこで設定します。

<mx:ComboBox x="10" y="10" dataProvider="{hts.lastResult.item}" prompt="アイテム" rowCount="5"  width="200"
    labelField="title" editable="true" dropdownWidth="300">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox label="{data.title}" width="300" height="100"
                horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:Image source="{data.img}" width="100" height="100"/>
                <mx:Text text="{data.title}" width="200"/>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>

このときラベルを指定することもできます。今回はdata.titleをラベルに設定しています。

labelField="title"

Flexなソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
private function init():void{
    hts.send({
        "word":"コスプレ衣装"
    });
}
]]>
</mx:Script>
<mx:HTTPService id="hts" url="http://moeten.info/maidcafe/?m=moesearch_new&amp;type=rakuten&amp;ptype=xml"
    resultFormat="e4x" showBusyCursor="true"/>
<mx:ComboBox x="10" y="10" dataProvider="{hts.lastResult.item}" prompt="アイテム" rowCount="5"  width="200"
    labelField="title" editable="true" dropdownWidth="300">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox width="300" height="100"
                horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:Image source="{data.img}" width="100" height="100"/>
                <mx:Text text="{data.title}" width="200"/>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>
</mx:Application>