Change the List itemRender depends of the view state

I have one list, which the item render it`s like this:link. But now I need to enable or disable the button delete depends the view state which my List is inside.

This is my view(which contains the list):

<s:states>
    <s:State name="main" />             <!-- Navigation.CART_MAIN  -->
    <s:State name="cash" />             <!-- Navigation.CART_CASH  -->
    <s:State name="credit" />           <!-- Navigation.CART_CREDIT  -->
</s:states>
    <s:List id="theList"
     开发者_JAVA百科       width="480" height="240"
            x="69" y="82"
            dataProvider="{model.products}"
            useVirtualLayout="false"
            itemRenderer="com.png.vm.ui.components.ProductCartThumbnail" >

    </s:List>

The thing is that I just want to enable the delete buttons inside the itemRender when the screen is using the state "main"

---

Another option would be to create separate itemRenderers and use the itemRendererFunction.

I've taken this example from similar question that was asked earlier and modified it a bit to suit your needs:

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

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

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

        private function list_itemRendererFunc(item:Object):ClassFactory {
            var cla:Class = MainItemRenderer;
            switch (currentState) {
                case "main":
                    cla = MainItemRenderer;
                    break;
                default:
                    cla = CashCreditItemRenderer;
                    break;
            }
            return new ClassFactory(cla);
        }
    ]]>
</fx:Script>

<s:List id="theList"
        x="69" y="82"
        itemRendererFunction="list_itemRendererFunc"
        dataProvider="{model.products}"
        useVirtualLayout="false">

EDIT: Here's the other solution that was used. You can designate different itemRenderers by declaring different property values for each state.

<s:List id="theList" 
        width="393" height="223" 
        x="42" y="69" 
        dataProvider="{model.products}" 
        useVirtualLayout="false" 
        itemRenderer.main="com.png.vm.ui.components.ProductCartThumbnail" 
        itemRenderer="com.png.vm.ui.components.ProductCartThumbnailReadOnly">

---

I got exactly the same problem.

I injected the model state (modelState for example) which determines the state of the buttons in the renderer class.

<s:ItemRenderer>
    <fx:Script>
        <![CDATA[
                import spark.components.List;

                [Bindable]
                public var modelState:String;

                public function deleteItem():void {
                    var parentList:List = owner as List;
                    // remove the item
                    parentList.dataProvider.removeItemAt(parentList.dataProvider.getItemIndex(data))
                }
            ]]>
        </fx:Script>
        <s:HGroup>
            <s:Label text="{data}" />
            <s:Button id="remove" label="X"  click="deleteItem()" 
                      enable="{modelState=='main'}"/>
        </s:HGroup>
</s:ItemRenderer>

Yes, I know that this is not the best decision!