当前位置： 文江博客话题详情

当滚动 itemRenderer 中的复选框时，选中/取消选中

发布于 2024-12-05 09:51:16 字数 12583 浏览 0 评论 0原文 

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.
原文 
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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

樱娆 2024-12-12 09:51:16

这是一件有趣的事。我不久前遇到过它。当项目渲染器滚动到屏幕外时，它会被销毁并重新使用。因此它看起来未被选中。如果我没记错的话，请尝试将控件绑定到渲染器中的一个方法，该方法将它们的值更新为数据对象中的值。例如 或在渲染器上查找更新事件并设置您的值。

This is a fun one. I ran into it a while back. Your item renderer is destroyed and reused as it scrolls off screen. Therefore it appears unselected. If I remember right, try binding your controls to a method in the renderer that updates their values to those in the data object. e.g. <s:checkbox selected={myMethod(data.selected)} /> or look for an update event on the renderer and set your values.

回复 原文
凉城 2024-12-12 09:51:16

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

您的项目渲染器：

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 上的复选框并开始滚动时，带有选中框的 itemRenderer 将被重用以显示仍设置 selected="true" 值的其他记录。

因此，您必须显式设置复选框值。对于这个例子，如果 value.access 是布尔值并且它用于复选框，那么它肯定会起作用。

谢谢。

Just saw this post and seems you have not accepted any answer yet:

Your item renderer:

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

Uncomment the above line : //chk.selected = value.access;

Flex DataGrid recycles its itemRenderers for better memory performance. When you check a CheckBox on an itemRenderer and start scrolling, that itemRenderer with the checked box is getting reused to display other records with the selected="true" value still set.

So you have to explicitly set the check box value. For this example if value.access is boolean and it is for checkbox it will definitely work.

Thanks.

回复 原文
~没有更多了~

关于作者

八巷

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文