DataGrid ItemRenderer错误

Question

我使用简单的XML文件填充数据网格的3列。最后一列应该是一个itemrenderer，基本上是一个Button。但是，该按钮应仅出现在datagrid第3列的某些行上，具体取决于XML文件中的值，即“true”或“false”。所以基本上我想将itemrenderer中按钮的Visible属性设置为true或false。

    Here is the whole application

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" pageTitle="Dynamic Data Grid">
        <!--    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
        </s:layout>-->

        <fx:Declarations>
            <s:ArrayList id="cccb_dp">
                <fx:String>User1</fx:String>
                <fx:String>User2</fx:String>
                <fx:String>User3</fx:String>
            </s:ArrayList>

            <fx:XML id="tempXML" source="assets/fieldsXML.xml"/>
            <s:XMLListCollection id="fieldsXMLList" source="{tempXML.worker}"/>

        </fx:Declarations>

        <s:layout>
            <s:VerticalLayout/>
        </s:layout>

        <s:VGroup verticalAlign="middle" horizontalCenter="1" verticalCenter="1" horizontalAlign="center">

            <s:HGroup horizontalAlign="center" verticalCenter="-221" width="580" height="158" x="75">
                <s:Label text="CC" width="23" height="24" verticalAlign="middle" fontWeight="bold"/>
                <s:DropDownList id="cc_cb" dataProvider="{cccb_dp}" width="175"/>
            </s:HGroup>

            <mx:DataGrid id="myDG" dataProvider="{fieldsXMLList}">
                <mx:columns>
                    <mx:DataGridColumn headerText="Header1" dataField="@field_label"/>
                    <mx:DataGridColumn headerText="Header2" dataField="@field_value"/>
                    <mx:DataGridColumn headerText="Header3">
                        <mx:itemRenderer>
                            <fx:Component>
                                <s:Button click="onClick(event)" label="Click Me" dataChange="onDataChange(event)" >
                                    <fx:Script>
                                        <![CDATA[
                                            import mx.controls.Alert;

                                            private function onClick(evt:Event):void
                                            {
                                                Alert.show(data.@field_visibility);
                                            }
                                            private function onDataChange(evt:Event):void
                                            {
                                                visible=data.@field_visibility;
                                            }
                                        ]]>
                                    </fx:Script>
                                </s:Button>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>
                </mx:columns>
            </mx:DataGrid>

        </s:VGroup>

    </s:Application>


    The XML:
    <worker_fields>
        <worker id="1" field_label="Seller" field_value="5" field_visibility="false"/>
        <worker id="1" field_label="Balance" field_value="100" field_visibility="true"/>
        <worker id="1" field_label="Cash Owned" field_value="300" field_visibility="true"/>

        <worker id="2" field_label="Seller" field_value="5" field_visibility="false"/>
        <worker id="2" field_label="Balance" field_value="130" field_visibility="true"/>
        <worker id="2" field_label="Cash Owned" field_value="132" field_visibility="false"/>
        <worker id="2" field_label="Credits" field_value="131" field_visibility="true"/>
    </worker_fields>    


Any idea how to go around it.  

Thanks you for the precious help.

Answer 1

每个itemRenderer获取一个数据对象;其中包含渲染器正在显示的元素。在渲染器中不会有名为field_visibility的属性，因为它不是默认属性，并且您没有创建一个属性。

但是，它应该是传递给渲染器的数据对象的属性。

data属性应指向单个worker：

<worker id="1" field_label="Cash Owned" field_value="300" field_visibility="true"/>

你应该可以通过代码的轻微修改来访问它：

        <mx:itemRenderer>
            <fx:Component>
                <mx:Button click="onClick(event)" label="Click Me" visible="{data.@field_visibility}">
                    <fx:Script>
                    <![CDATA[
                        import mx.controls.Alert;

                        private function onClick(evt:Event):void
                        {
                            Alert.show(data.field_visibility);
                        }
                    ]]>
                    </fx:Script>
                </mx:Button>
            </fx:Component>
        </mx:itemRenderer>

获得最佳效果;您应该考虑收听数据更改事件并以这种方式更改可见性。众所周知，这比使用绑定会导致更少的问题：

        <mx:itemRenderer>
            <fx:Component>
                <mx:Button click="onClick(event)" label="Click Me" dataChange="onDataChange()" >
                    <fx:Script>
                    <![CDATA[
                        import mx.controls.Alert;

                        private function onClick(evt:Event):void
                        {
                            Alert.show(data.field_visibility);
                        }
                        private function onDataChange(evt:Event):void
                        {
                            visible=data.@field_visibility";
                        }
                    ]]>
                    </fx:Script>
                </mx:Button>
            </fx:Component>
        </mx:itemRenderer>

---

由于某种原因，原始海报的最后一次代码编辑消灭了他的实际问题。 Flex在将XML字符串值转换为布尔值时遇到问题。 data.@field_visibility似乎正在返回XMLList。作为一个始终为true的布尔值。这是第一个问题。它可以通过这样的条件来解决：

if(data.@field_visibility == "true"){
 this.button.visible = true;
} else {
 this.button.visible = false;
}

第二个问题是，如果它是顶级组件，该按钮似乎不会消失。因此，您需要将其放在容器中。我使用了画布。

这是修改后的应用程序：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" pageTitle="Dynamic Data Grid">
    <!--    <s:layout>
    <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>-->

    <fx:Declarations>
        <s:ArrayList id="cccb_dp">
            <fx:String>User1</fx:String>
            <fx:String>User2</fx:String>
            <fx:String>User3</fx:String>
        </s:ArrayList>

        <fx:XML id="tempXML" source="assets/fieldsXML.xml"/>
        <s:XMLListCollection id="fieldsXMLList" source="{tempXML.worker}"/>

    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:VGroup verticalAlign="middle" horizontalCenter="1" verticalCenter="1" horizontalAlign="center">

        <s:Button click="{myDG.invalidateList()}" label="Invalidate List" />
        <s:HGroup horizontalAlign="center" verticalCenter="-221" width="580" height="158" x="75">
            <s:Label text="CC" width="23" height="24" verticalAlign="middle" fontWeight="bold"/>
            <s:DropDownList id="cc_cb" dataProvider="{cccb_dp}" width="175"/>
        </s:HGroup>

        <mx:DataGrid id="myDG" dataProvider="{fieldsXMLList}">
            <mx:columns>
                <mx:DataGridColumn headerText="Header1" dataField="@field_label"/>
                <mx:DataGridColumn headerText="Header2" dataField="@field_value"/>
                <mx:DataGridColumn headerText="Header3">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:Canvas dataChange="container1_dataChangeHandler(event)" >
                                <mx:Button label="Click Me" id="button"  />
                                <fx:Script>
                                    <![CDATA[
                                        import mx.events.FlexEvent;

                                        protected function container1_dataChangeHandler(event:FlexEvent):void
                                        {
                                            if(data.@field_visibility == "true"){
                                                this.button.visible = true;
                                            } else {
                                                this.button.visible = false;
                                            }
                                        }

                                    ]]>
                                </fx:Script>
                            </mx:Canvas>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>

    </s:VGroup>

</s:Application>

Answer 2

除了@ www.Flextras.com的回答。

如果您想依赖列的dataField属性并使渲染器数据不可知，则可以在渲染器中实现mx.controls.listClasses.IDropInListItemRenderer接口。至于您从已经实现它的MX Button继承而来，代码将如下：

<mx:DataGrid dataProvider="{fieldsXMLList}" id="myDG">
    <mx:columns>
        <mx:DataGridColumn dataField="@field_label" headerText="Header1" />
        <mx:DataGridColumn dataField="@field_value" headerText="Header2" />
        <mx:DataGridColumn dataField="@field_visibility" headerText="Header3">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Button click="onClick(event)" label="Click Me" visible="{data[listData.dataField]}">
                        <fx:Script>
                        <![CDATA[
                            import mx.controls.Alert;

                            private function onClick(evt:Event):void
                            {
                                Alert.show(data[listData.dataField]);
                            }
                        ]]>
                        </fx:Script>
                    </mx:Button>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>