Flex List control more than a String ?

Question

Hi flexers,

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>