Question

I have a list control where i want to show a string (thats fine) but a colored square as well.

Imagine i have a ‘add player’ button a text input with a color picker. I want to see the color + player name in the List. How could i do this ?

[Bindable] public var data:ArrayCollection = new ArrayCollection();     <mx:List id='eqlist' width='100%' dataProvider='{data}' />    data.addItem(fooTxt.text); 

This code will only add the text value, should i add a hbox object composed of a colored canvas + text value ?

Thanks,

Answer 1

You have to work with List itemRenderers. Basically List item renderer (ListItemRenderer) doesn’t support a different backgound color per item (backgound color can only be set on List parent).

Example (MXML version – not my favorite way but the simpliest):

Data provider initialization:

            var anObject: Object = new Object();             anObject.label = 'my player';             anObject.backgroundColor = 0xFF0000;             anObject.color = 0xFFFFFF;             aData.addItem(anObject);              anObject = new Object();             anObject.label = 'my player 2';             anObject.backgroundColor = 0x0000FF;             anObject.color = 0xAAAAAA;             aData.addItem(anObject); 

List display:

    <mx:List id='eqlist' width='100%' dataProvider='{aData}' >         <mx:itemRenderer>             <mx:Component>                 <mx:Canvas backgroundColor='{data.backgroundColor}'                     color='{data.color}'>                     <mx:Label text='{data.label}'>                      </mx:Label>                 </mx:Canvas>             </mx:Component>         </mx:itemRenderer>     </mx:List>