Icon with Image, Text and 'x' for remove in Carousel list

I've a carousel, that has got an image and a label that shows a description of the icon. It is done using It has got an ItemRenderer that renders the image above the icon description text. It's very similar to: the carousel in http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_2.html

Up on click event I display the image and details of some text pertaining that image/icon.

Now I wanted to introduce a smaller 'x' icon on top right hand side of the icons so the user could remove the items he's not interested in from the carousel's list of items. This would dispatch a different event so removeIconEvent and clickEvent would be handled differently.

I'm not sure how to do that. I tried defining custom event but it's not working.

Any ideas? refer开发者_C百科ences?

thanks.

Well, if thing's first, you need to add that 'x' at the corner of your custom item renderer. Simple enough just a quick <s:Button text="x" /> with position information should do.

What comes next is slightly more difficult since I would imagine you're adding all these images/text using the dataProvider property of the List. First, you need to create a custom event class that has a data property (the data of the item renderer) and then add that event to be dispatched (with bubbling) on the button click event:

<s:Button click="dispatchEvent(new CustomEvent('someEventString', data, true))" />

That event needs to be listened on the List using addEventListener, and when it's received, get the data property and remove it from the dataProvider using removeItem.