Question

鉴于以下 Flex 组件，其 DataGrid 绑定到{extractRecipients}，第一列绑定了复选框项目渲染器

<mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
    <mx:columns> 
               <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" editable="true" editorDataField="selected" rendererIsEditor="true" dataField="selected">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:CheckBox selected="{data.selected}" click="data.selected=!data.selected">
                            </mx:CheckBox>
                        </mx:Component>
                    </mx:itemRenderer>
               </mx:DataGridColumn>
               <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
               <mx:DataGridColumn headerText="ColumnB"          dataField="account" width="50"/>
    </mx:columns>
</mx:DataGrid>

如何处理/阻止选中/取消选中复选框的事件，但是在主要组件上，而不是在复选框中，并保持绑定。

Answer 1

也许这段代码很有用，第一个很简单但第二个更高级（也许是它们之间的最佳选择）：

这里有用于下载 SWF FILE 的链接，用于测试这两个示例。

<强> SWF LINK 1

<强> SWF LINK 2

SOURCE 1 ：请注意，该函数获取已单击的行，但无法正确执行复选框与arraycollection之间的绑定。这种方法对某些情况很有用。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
            }

            public function changeEvent(event:Event):void{
                var ev:Object = event.currentTarget.data;
                txt.text = ev["reportDate"] + "-" + ev["account"] + "-" + ev["selected"];
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
            <mx:columns> 
                <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:CheckBox selected="{data.selected}" change="{outerDocument.changeEvent(event)}">
                            </mx:CheckBox>                      
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
                <mx:DataGridColumn headerText="ColumnB"  dataField="account" width="50"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

SOURCE 2 ：这段代码更复杂，在我的情况下，当我必须这样做时，我在其他地方创建了 ItemRendererComponente 源文件，但在此示例中，代码位于复选框内。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
                extractRecipients.addEventListener(CollectionEvent.COLLECTION_CHANGE,changeEvent);
            }

            public function changeEvent(event:Event):void{
                var str:String = "";
                for each(var obj:Object in (event.currentTarget as ArrayCollection)){
                    str += obj["reportDate"] + "-" + obj["account"] + "-" + obj["selected"] + "\n";
                }
                txt.text = str;
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
        <mx:columns> 
            <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox selected="{data.selected}" change="onChange()">
                            <mx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.dataGridClasses.DataGridListData;
                                    import mx.controls.listClasses.BaseListData;
                                    import mx.events.CollectionEvent;
                                    import mx.events.FlexEvent;
                                    import mx.controls.DataGrid;

                                    private var _dataField:String;
                                    private var _listData:BaseListData;
                                    private var _dataGrid:Object;

                                    override public function set listData(value:BaseListData):void {
                                        _listData = value;
                                        _dataGrid = value.owner;
                                        _dataField = (value as DataGridListData).dataField;
                                    }

                                    override public function set data(value:Object):void {      
                                        super.data = value;
                                        // Dispatch the dataChange event.
                                    }

                                    private function onChange():void {
                                        data[_dataField] = this.selected;
                                        var dp:ArrayCollection = (_dataGrid as DataGrid).dataProvider as ArrayCollection;
                                        dp.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
                                    }

                                ]]>
                            </mx:Script>
                        </mx:CheckBox>                      
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
            <mx:DataGridColumn headerText="ColumnB"          dataField="account" width="50"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

我希望这会对你有所帮助。

如何在子组件上触发的父组件上处理和事件

1 个答案: