Change the List itemRender depends of the view state - apache-flex

Question

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

Answer 1

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

Answer 2

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!