Adding an icon to all items in the List Component.

List component does not have a default icon. Easy way to add one is to add a Icon function which is very similar to the one we use with Flash v2 components. Only difference is instead of string we need to return a class reference to the image

[Embed (source = 'res/image_link.png')]
 [Bindable]
 public var image_ico : Class;
 
 private function ImageLabelFunction(item:Object):Class{
  return image_ico;
 }

Now we can point the iconFunction attribute to this function as shown below

 
<pre>&lt;mx:List width="100%" rowHeight="18" height="80" themeColor="#A9B4CB" <strong>iconFunction="ImageLabelFunction"</strong>&gt;
 &lt;mx:Array&gt;
  &lt;mx:String&gt;Image 1&lt;/mx:String&gt;
  &lt;mx:String&gt;Image 2&lt;/mx:String&gt;
  &lt;mx:String&gt;Image 3&lt;/mx:String&gt;
 &lt;/mx:Array&gt;
&lt;/mx:List&gt;</pre>

Which results in List Component with a default Icon

Leave a Reply