0

我有一个使用 Checkbox 作为 ItemRenderer 的 List 组件。现在的问题是复选框和列表选择之间没有同步。当复选框被选中/取消时，我想更新 List 的 selectedIndices 属性，反之亦然。该列表允许多项选择。

有任何示例代码吗？

我的代码如下：

在 List 组件中分配 Itemrenderer：

_list.itemRenderer=new ClassFactory(CheckBoxRenderer);

CheckBoxRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        label="{data.name}"
        selected="{data.isSelected}">
</mx:CheckBox>
4

1 回答 1

2

如果我正确理解了您的问题，这是我的解决方案和运行示例。

我添加了一个数据网格，让您看到数据提供者在用户交互后发生了变化。

//应用

<?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">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false}]);

        protected function onClick(event:MouseEvent):void
        {
            myDG.dataProvider.dispatchEvent( new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
        }
    ]]>
</fx:Script>

<s:VGroup x="10" y="10">

    <s:List dataProvider="{dp}" itemRenderer="renderers.CheckBoxRenderer" click="onClick(event)"/>

    <s:Spacer height="20"/>

    <s:DataGrid id="myDG" height="120" dataProvider="{dp}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="name" headerText="Name" width="70"/>
                <s:GridColumn dataField="isSelected" headerText="IsSelected" width="90"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</s:VGroup>

</s:Application>

//渲染器

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">
<fx:Script>
    <![CDATA[
        protected function onChangeEvent(event:Event):void
        {
            data.isSelected = !data.isSelected;
        }
    ]]>
</fx:Script>

<s:CheckBox label="{data.name}" selected="{data.isSelected}" change="onChangeEvent(event)"/>

</s:ItemRenderer>

编辑

正如我提到的，添加数据网格只是为了显示数据提供者中的更改。这是没有附加组件的代码。

您需要通过调试器控制数据提供者才能看到它正在被更改。

在此处输入图像描述

添加按钮只是为了在 trace() 行上调用调试器。

//没有网格的应用

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

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import renderers.CheckBoxRenderer;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false}]);

        protected function onBtnClick(event:MouseEvent):void
        {
            trace();
        }

    ]]>
</fx:Script>

<s:VGroup x="10" y="10">
    <s:List dataProvider="{dp}" itemRenderer="renderers.CheckBoxRenderer"/>
    <s:Button click="onBtnClick(event)"/>
</s:VGroup>

</s:Application>

编辑2

如果您想限制所选项目的最大数量，请查看此代码。它对我很有效。这次我在 List 定义中插入了 itemRenderer。

这是工作示例。

<?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" 
           creationComplete="{reculcSelectedCount()}">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        private var _selectedCount:int = 0;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false},
            {name: "record04", isSelected: false}]);

        [Bindable]public function get selectedCount():int
        {
            return _selectedCount;
        }

        public function set selectedCount(value:int):void
        {
            _selectedCount = value;
        }

        protected function onClick(event:MouseEvent):void
        {
            reculcSelectedCount();
        }

        protected function reculcSelectedCount():void
        {
            selectedCount = 0;
            for each (var item:Object in dp)
            {
                if (item.isSelected)
                    selectedCount++;
            }
        }

    ]]>
</fx:Script>

<s:VGroup x="10" y="10">
    <s:List dataProvider="{dp}" click="onClick(event)">
        <s:itemRenderer>
            <fx:Component>
                <mx:HBox>
                    <fx:Script>
                        <![CDATA[
                            protected function onChangeEvent(event:Event):void
                            {
                                data.isSelected = !data.isSelected;
                            }
                        ]]>
                    </fx:Script>
                    <s:CheckBox id="cb" label="{data.name}" selected="{data.isSelected}" enabled="{data.isSelected || (!data.isSelected &amp;&amp; (outerDocument.selectedCount &lt; 2))}" change="onChangeEvent(event)"/>
                </mx:HBox>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:VGroup>
</s:Application>
于 2013-09-06T09:50:14.850 回答