1 Reply Latest reply on May 10, 2010 5:00 PM by jsd99

    Setting background image of a selected List item

    jsd99 Level 3

      I have a TileList.  I would like to put an image behind the currently selected item of the list.  So far I have not been able to figure out how to do this.  I am using a custom item renderer for the list items.

        • 1. Re: Setting background image of a selected List item
          jsd99 Level 3

          OK, so, I got it to work by creating my own subclass of List and overriding the drawItem method, like this:

           

          override protected function drawItem(item:IListItemRenderer,
                                              selected:Boolean = false,
                                              highlighted:Boolean = false,
                                              caret:Boolean = false,
                                              transition:Boolean = false):void {
                      super.drawItem(item, selected, highlighted, caret, transition);
                      var o:Object = item as Object;
                      if (o.hasOwnProperty('selectedItem')) {
                          o.selectedItem = selected;
                      }

          }

           

          This sets a property on the itemRenderer called selectedItem.  In your itemRenderer you can define a function to handle changes to the selectedItem property.  Mine looks like this:

           

                  public function set selectedItem(b:Boolean):void {
                          if (b) {
                              setStyle('backgroundImage', 'assets/teambox.png');
                          }
                          else {
                              setStyle('backgroundImage', null);
                          }
                      }