选中/取消选中在itemRenderer中滚动我的复选框时

Question

This is my application:


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">

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

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            import spark.components.gridClasses.IGridItemRenderer;

            public var modulesXMLList:XMLListCollection;

            private function onGridInitialize(event:FlexEvent):void{
                this.addEventListener('moduleItemChange', onModuleItemChange);
            }

            private function onModuleItemChange(event:Event):void{
                var item:IGridItemRenderer = event.target as IGridItemRenderer;

                if(!item || !item.data) 
                    //item.data.access = !item.data.access;
                    Alert.show(item.data.sub_module);    
            }

            protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void
            {
                modulesXMLList = new XMLListCollection(tempXML.module as XMLList);

                modulesXMLList.refresh();
                myDatagrid.dataProvider = modulesXMLList;

            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <s:RadioButtonGroup id="rbg1"/>
        <fx:XML id="tempXML" source="assets/myXMl1.xml"/>

        <!--<s:ArrayCollection id="moduleControlPanel_DP">
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
        </s:ArrayCollection>
        -->
    </fx:Declarations>


    <s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9"  
                x="20" y="20" width="184" height="176">
        <s:columns>
            <s:ArrayList>                   
                <s:GridColumn headerText="Default">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="@{data.default}" label="" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn> 
                <s:GridColumn headerText="Access" dataField="@access">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>

                                <fx:Script>
                                    <![CDATA[

                                        override public function set data(value:Object):void
                                        {
                                            // not sure of the details on when or why, but sometimes this method is passed a null value
                                            if(value != null)
                                            {
                                                //super.data = value;
                                                // set itemRenderer's state based on data value
                                                //chk.selected = value.access;
                                                super.data = value;
                                                validateNow();
                                            }
                                        }

                                        protected function Check_clickHandler(even:MouseEvent):void
                                        {

                                            dispatchEvent(new Event('moduleItemChange', true));
                                        }  
                                    ]]>
                                </fx:Script>

                                <s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="@{data.access}" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn headerText="Sub-Module" dataField="@sub_module" />
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</s:Application>



And this my C<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">

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

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            import spark.components.gridClasses.IGridItemRenderer;

            public var modulesXMLList:XMLListCollection;

            private function onGridInitialize(event:FlexEvent):void{
                this.addEventListener('moduleItemChange', onModuleItemChange);
            }

            private function onModuleItemChange(event:Event):void{
                var item:IGridItemRenderer = event.target as IGridItemRenderer;

                if(!item || !item.data) 
                    //item.data.access = !item.data.access;
                    Alert.show(item.data.sub_module);    
            }

            protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void
            {
                modulesXMLList = new XMLListCollection(tempXML.module as XMLList);

                modulesXMLList.refresh();
                myDatagrid.dataProvider = modulesXMLList;

            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <s:RadioButtonGroup id="rbg1"/>
        <fx:XML id="tempXML" source="assets/myXMl1.xml"/>

        <!--<s:ArrayCollection id="moduleControlPanel_DP">
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
            <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
        </s:ArrayCollection>
        -->
    </fx:Declarations>


    <s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9"  
                x="20" y="20" width="184" height="176">
        <s:columns>
            <s:ArrayList>                   
                <s:GridColumn headerText="Default">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="@{data.default}" label="" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn> 
                <s:GridColumn headerText="Access" dataField="@access">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>

                                <fx:Script>
                                    <![CDATA[

                                        override public function set data(value:Object):void
                                        {
                                            // not sure of the details on when or why, but sometimes this method is passed a null value
                                            if(value != null)
                                            {
                                                //super.data = value;
                                                // set itemRenderer's state based on data value
                                                //chk.selected = value.access;
                                                super.data = value;
                                                validateNow();
                                            }
                                        }

                                        protected function Check_clickHandler(even:MouseEvent):void
                                        {

                                            dispatchEvent(new Event('moduleItemChange', true));
                                        }  
                                    ]]>
                                </fx:Script>

                                <s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="@{data.access}" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn headerText="Sub-Module" dataField="@sub_module" />
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</s:Application>


And this is my XML file:

<?xml version="1.0" encoding="UTF-8"?>

<modules>
    <module habilitation_id="1" module_id="1" sub_module="Sub1" default="true" access="true" />
    <module habilitation_id="1" module_id="2" sub_module="Sub2" default="true" access="true" />
    <module habilitation_id="1" module_id="2" sub_module="Sub3" default="false" access="false" />
    <module habilitation_id="1" module_id="2" sub_module="Sub4" default="false" access="true" />
    <module habilitation_id="1" module_id="3" sub_module="Sub5" default="true" access="true" />
    <module habilitation_id="1" module_id="3" sub_module="Sub6" default="false" access="true" />
    <module habilitation_id="1" module_id="4" sub_module="Sub7" default="true" access="true" />
    <module habilitation_id="1" module_id="4" sub_module="Sub8" default="false" access="true" />
</modules>




Anyone please throw some lights.

Answer 1

这是一个有趣的。我跑了一会儿。您的项目渲染器在滚动屏幕时会被销毁并重复使用。因此它似乎未被选中。如果我没记错，请尝试将控件绑定到渲染器中的方法，该方法将其值更新为数据对象中的值。例如<s:checkbox selected={myMethod(data.selected)} />或在渲染器上查找更新事件并设置值。

Answer 2

刚看到这篇文章，似乎你还没有接受任何答案：

您的项目渲染器：

override public function set data(value:Object):void
{
    if(value != null)
    {
        super.data = value;
        //chk.selected = value.access;
        validateNow();
    }
}

取消注释以上行：//chk.selected = value.access;

Flex DataGrid会回收其itemRenderer以获得更好的内存性能。检查itemRenderer上的CheckBox并开始滚动时，带有复选框的itemRenderer将被重用，以显示仍设置了selected =“true”值的其他记录。

因此您必须明确设置复选框值。对于这个例子，如果value.access是布尔值，它是复选框，肯定会有效。

感谢。