Flex Mobile Spark List conditional ItemRenderer

Question

I want to create a custom spark list which, based on a value (called type) in the data provider row, will set a conditional item renderer for that row.

<s:List>
    <s:dataProvider>
        <s:ArrayCollection>
            <s:source>
                <fx:Object type="type1" label="type 1 item" />
                <fx:Object type="type2" label="type 2 item" />
                <fx:Object type="type3" label="type 3 item" />
                <fx:Object type="type2" label="type 2 item" />
                <fx:Object type="type4" label="type 4 item" />
            </s:source>
        </s:ArrayCollection>
    </s:dataProvider>
</s:List>

So in essence the item renderer for each type of row would be different.

Why do I want to do this? Because using states in the item renderer for the different layouts is not reliable, it is hit and miss when you scroll quickly.

I did find this code for the mx list:

public class MultipleRenderersList extends List
{       
    override public function createItemRenderer(data:Object):IListItemRenderer
    {
        if (data.type == 'type1')
    {
        return new Type1Component;
    }
    else if (data.label == 'type2')
    {
        return new Type2Component;
    }
    return null;
}

But the spark list doesn't expose the 'createItemRenderer' or even anything similar. It does however have

override public function set itemRenderer(value:IFactory):void

But I have no way of accessing the dataProvider to do the conditional part of the problem.

Can anyone help?

@BotMaster, I don't understand that comment, what I am trying to achieve is when the DataProvider presents an row item of type1, I want a type1 item renderer (different layout, colours etc), just for that row same for type2 etc. I can't use state switching in a custom renderer because it is really unreliable. Unless I am missing something obvious, if so please explain further :) Thanks — Shaine Fisher
if your custom itemrenderer override data then you can have it make decision about that data and how to render itself. — BotMaster
I do override set data and use a switch/case to read the value of type, but then I have to create the different layouts (either in layoutContents or states directly from set data), but then if you quickly scroll down the list the layout sometimes goes slightly wrong (which can remove some much needed functionality). I was hoping that we could still do a conditional on a row by row basis as this would require less processing on the client, and remove all of the processing in the item itself. — Shaine Fisher
A downvote for a question that I ended up answering myself? If it had been a bad question surely someone would have been able to answer it even taking into consideration the fact that I couldn't get set data to organise the layout consistently when you scroll through the list? I thought explained it rather well. And as the actual answer is a renderer function... — Shaine Fisher

Shaine Fisher Shaine Fisher · Accepted Answer · 2016-01-20T17:44:56

Ok, so found it, I think :/

http://sourceforge.net/adobe/flexsdk/wiki/Spark%20List/

snippet

private function introspectRole(item:Object):IFactory {
    if (item.role == "employee") {
        return new ClassFactory(EmployeeRenderer);
    } else if (item.role == "manager") {
        return new ClassFactory(ManagerRenderer);   
    } else { 
        return new ClassFactory(DefaultItemRenderer);
    }
}

And set the itemRendererFunction to this, apparently simple, but it works, so yeah.

Thanks

Flex Mobile Spark List *conditional* ItemRenderer

1 Answers

Flex Mobile Spark List conditional ItemRenderer