Question

我有一个列表，该项目呈现如下：link。但现在我需要启用或禁用按钮删除取决于我的列表所在的视图状态。

这是我的观点（包含清单）：

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

问题是我只想在屏幕使用状态“main”时启用itemRender中的删除按钮

Answer 1

另一种选择是创建单独的itemRenderers并使用itemRendererFunction。

我从前面提到的类似问题中采用了这个例子，并根据您的需要进行了一些修改：

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

修改这是使用的另一种解决方案。您可以通过为每个州声明不同的属性值来指定不同的itemRenderer。

<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

我遇到了完全相同的问题。

我注入了模型状态（例如modelState），它决定了渲染器类中按钮的状态。

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

是的，我知道这不是最好的决定！

更改List itemRenderer取决于视图状态

2 个答案: