Can't interact with children of an itemRenderer in Flex 4 Gumbo
- by BlueDude
I thought this would be pretty easy but I'm running into all sorts of problems with this. I have an ItemRenderer with a an image and two labels. I want to assign separate mouse events to the image and two labels. It seems like the item renderer is treated like a single interactive piece and I haven't found a way to override that. I couldn't even disable the default rollover effect so I had to style the rollOverColor to match my background.
Can anyone provide a solution?
<s:DataGroup id="browserDataGroup" dataProvider="{model.userBoardList}"
verticalCenter="0" left="10" rollOverColor="0x424242"
itemRenderer="edu.xxxxx.components.board.BrowserItemRenderer">
<!--itemrenderer code below -->
<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/halo"
xmlns:ns="library://ns.adobe.com/flex/mx"
buttonMode="true" useHandCursor="true"
mouseChildren="true">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
</s:states>
<s:layout>
<s:VerticalLayout gap="2"/>
</s:layout>
<s:Group>
<ns:Image id="image" source="{data.thumbnail}"
addedEffect="Fade" completeEffect="Fade" removedEffect="Fade"
width="130" height="89"
horizontalCenter="0" verticalCenter="0"/>
<s:Rect id="imageRect" width="130" height="89">
<s:stroke>
<s:SolidColorStroke color="0xFFFFFF" joints="miter" pixelHinting="true"/>
</s:stroke>
</s:Rect>
</s:Group>
<s:Label text="{data.title}" color="0xFFFFFF" fontWeight="bold"/>
<s:Group>
<s:layout>
<s:HorizontalLayout gap="3"/>
</s:layout>
<s:Label text="Edit" color="0xFFFFFF" click="trace('edit');"
textDecoration.up="underline" textDecoration.over="none"/>
<s:Label text="|" color="0xFFFFFF"/>
<s:Label text="Delete" color="0xFFFFFF" click="trace('delete');"
textDecoration.up="underline" textDecoration.over="none"/>
</s:Group>
</s:ItemRenderer>
