1

次のFlexコンポーネントの場合、{extractRecipients} にバインドされたDataGridがあり、最初の列にチェックボックス アイテム レンダラーがあります。

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

チェックボックスが選択/選択解除されているが、チェックボックスではなくメインコンポーネントでイベントを処理/バブルし、バインディングを保持するにはどうすればよいですか。

4

1 に答える 1

0

たぶん、このコードは役に立つでしょう。1 つ目はシンプルですが、2 つ目はより高度です (おそらくそれらの間で最良の選択です)。

ここでは、両方の例をテストするためのSWF ファイルをダウンロードするためのリンクを示します。

SWF リンク 1

SWF リンク 2

ソース 1 : 関数はクリックされた行を取得しますが、チェックボックスと配列コレクションの間のバインディングが正しく機能しないことに注意してください。この方法は、特定の場合に役立ちます。

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

ソース 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>

これがお役に立てば幸いです。

于 2013-08-06T01:51:05.443 に答える