Custom renderer skin inheritance in Tree and List controls


Matt - Posted on 08 April 2008

I just spent most of the day trying to figure out a problem with a custom item renderer skin, so I thought I'd write it down here in case anyone else comes across this.
Basically I have a Tree control that contains a list of items that are rendered by my custom item renderer. Each renderer has a background gradient skin applied by the borderSkin style. Unfortunately there's a line in the List class that really screws this up:
renderer.styleName = this;
This is called when the Tree (or List) class creates a new item renderer and effectively replaces any style you assign to your item renderer with that of the Tree/List component. Therefore any style you assign to your Tree/List automatically gets inherited by your item renderer. I can't for the life of me think of one situation where anybody would ever want to do this!!
The simple fix is to re-apply the styleName in your item renderer, for example on your creationComplete even:
<mx:Canvas creationComplete="styleName='MyItemRendererStyle'" />
There's a Flex bug entry here: http://bugs.adobe.com/jira/browse/SDK-15002
Please vote for the bug so it gets fixed soon!!!

You just saved my day! Thank you!!!

I'm sure this bug has been fixed in the flex 3.4 and flex 4.0, but due to some heavy modifications of the flex library I have had to stay with version 3.2 for now. Thank you for posting this information I've had several hours of frustration dealing with list item bug.

-- Stephen

реально помогло)

Nice post, this really helped me out! Thanks a ton.

Thanks! I've been trying to deal with this for months. I also voted for the bug, let's hope they get it fixed.

If anyone else is looking, an easier way might be to simply have
stylename="{someFunc()}"
then have that function return the stylename you want.

Can you post an actionscript version of the solution? My itemRenderer is extending the TreeItemRenderer and I need my rows do have different styles. I can't use your solution because it is mxml. I've tried with canvas.addEventListener(FlexEvent.CREATION_COMPLETE, canvasComplete); but no luck. Any ideas?

About the author

Matthew Butt is an experienced developer, software architect and development manager. For more information, review the About page.