Using a CSS TypeSelector with an itemRenderer

english mobile

Today, I had more fun with item renderers. I had a component I was working on to try to prototype some new functionality, and I had set up styles for it in the <mx:styles> declaration of the Application tag. If I put my component in a container in the main Application, the style came through fine. If I used it as an itemRenderer of a List based class, only the text styles worked.

It seems that when you use a component this way, Flex will assign ListBaseContentHolder as the style name instead of the class name, but for some reason this only negates things like backround colors—text declarations come through just fine. This interesting feature isn't documented anywhere, so it took me a whole day to figure out the fix, which is so simple I wanted to pound my head against the wall till I couldn't see straight.

override protected function commitProperties():void{
this.styleName = this.className;
}

Hope this saves someone some time!

7 comments:

Neil said...

You certainly saved me some time - thanks :)

var said...

Thanks so much!

Josh McDonald said...

Thanks Amy, that's just the snippet I needed, I knew you'd blogged something like this a while ago ;-)

Off the top of my head you should probably call super.commitProperties() first though, or bad things might happen.

Unknown said...

Thanks, Amy!

Adobe Air/Flex Tips & architecture said...

Thanx, these posts are really
valuable. Started to loose my mind....


Arnoud

diogoko said...

Thank you very much! I'd have spent some hours trying to figure this out... =)

Amy B said...

Today, I handle this by overriding styleName to only take a string. List components pass their own Class in as the styleName, so by only accepting a string in this property you can still override with a valid styleName (for instance, if you are using not as an itemRenderer), but List components can't affect the style.