ufk
ufk

Reputation: 32094

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

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.

Upvotes: 1

Views: 3850

Answers (3)

Florian F
Florian F

Reputation: 8875

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">

Upvotes: 9

DanK
DanK

Reputation: 515

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.

Upvotes: 0

Amarghosh
Amarghosh

Reputation: 59451

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

Upvotes: 0

Related Questions