コンボボックスのカスタマイズ方法
コンボボックスをカスタマイズしてみました。
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&type=rakuten&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>