issue in using flex dropdownlist with itemrenderer

I am trying to create a multiselect dropdownlist by extending dropdownlist

private var COLOR_ARRAY:Array= 
        [{label:"Red", data:"#FF0000"},
        {label:"Green", data:"#00FF00"},
        {label:"Blue", data:"#0000FF"}];
[Bindable]
public var colorAC:ArrayCollection;
private function initData():void {
            colorAC=new ArrayCollection(COLOR_ARRAY);
         }
    ]]>
</fx:Script>

<local:MultiSelectionDropDown
    width="300"
    requireSelection="false"
    itemRenderer="MultiSelectItemRenderer"
    skinClass="MultiSelectionDropDownListSkin"
    dataProvider="{colorAC}"
    labelField="label"
/>

And following is my renderer code

<s:HGroup width="100%" verticalAlign="middle">
    <s:RichText id="labelDisplay"
                text="{data}"
                textAlign="left"
                styleName="listItem"
              开发者_Python百科  verticalAlign="middle"
                lineBreak="toFit"
                paddingTop="10"
                paddingBottom="10"
                color.hovered ="0xffffff"
                color.selected="0xffffff"
                paddingLeft="10"
                paddingRight="10"
                horizontalCenter="0" verticalCenter="1">
    </s:RichText>

    <mx:Spacer width="100%" />
    <s:CheckBox id="checkbox" />
</s:HGroup>

I am not able to display the label on my drop down.. what I am getting here is [object Object]...not able to figure out what i am doing wrong

---

That's because you set the text to the data object.

text="{data}"

What the RichText does is call the toString() method on that object, hence resultnig in "object Object". You need to specify the property of the data that should be used for the label display, for exemple

text="{data.title}"

You can also override the toString() method inside your value object and return whatever string you need to show.

override public toString():String
{
    return "foobar";
}