flex 4 list ItemRenderer: how can i have different itemrenderers for different rows ?

Question

Hiya.

I'm creating a list of scores for a game. now most of the list i need to have the same ItemRenderer. but in one specific row of the list where the user who's playing is listed, it should show different information and with different background color. how can i achieve this ?

update

I already tried to resolve the issue with states, i created 2 states, one state called 'mine' and the 2nd state called 'others'.

the problems that i got is that when users click on one of the list rows that state changes to i donno.. clicked or something and that's why i assumed that states are not the right action for me.

Answer 1

If the different data is embedded in the corresponding row of the dataProvider, you can check for the data in the overriden public set data method and set the itemRenderer's background color accordingly. If you need more controls in that particular row, you can use states. Just set this.currentState = "currentUser";

override public function set data(item:Object):void
{
  if(item.user == SomeGlobal.currentUser)//or outerDocument.currentUser
  {
    this.currentState = "currentUser";
  }
  else
  {
    //reset to default state, coz item renderers are reused
    this.currentState = "";
  } 
}

If you aren't familiar with states, there are lot of examples out there on using states in Flex

Answer 2

You could build a component to be the itemrenderer and have it provide different views depending on the data in the row using states - switching to the approriate state on creation.

Answer 3

The spark List control that comes with Flex 4 allows you to assign a different itemRenderer depending on some logic.

You can create a custom item renderer function by setting the itemRendererFunction property.

    <fx:Script>
    <![CDATA[
        import renderers.*;

        import mx.core.ClassFactory;
        import spark.skins.default.DefaultItemRenderer;

        private function list_itemRendererFunc(item:Object):ClassFactory {
            var cla:Class = DefaultItemRenderer;
            switch (item.type) {
                case "employee":
                    cla = EmployeeItemRenderer;
                    break;
                case "manager":
                    cla = ManagerItemRenderer;
                    break;
                default:
                    break;
            }
            return new ClassFactory(cla);
        }
    ]]>
</fx:Script>

<s:List id="list"
        labelField="name"
        itemRendererFunction="list_itemRendererFunc"
        horizontalCenter="0"
        verticalCenter="0">