Flex DataGrid与ComboBox itemRenderer

值得庆幸的是,我终于在Experts Exchange(hobbit72的答案)上找到了一些很好的帮助,描述了如何创建一个在网格中作为ItemRenderer工作的自定义组件.
我已经扩展了该代码,也支持使用组合框作为ItemEditor.完整组件如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    dataChange="setSelected()" 
    change="onSelectionChange(event)"
    focusEnabled="true">
    <mx:Script>
        <![CDATA[
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;
            import mx.controls.dataGridClasses.DataGridListData;

            private var _ownerData:Object;
            private var _lookupField:String = "value";

            // When using this component as an itemEditor rather than an itemRenderer
            // then set ' editorDataField="selectedItemKey"' on the column to 
            // ensure that changes to the ComboBox are propogated.
            [Bindable] public var selectedItemKey:Object;

            public function set lookupField (value:String) : void {
                if(value) {
                    _lookupField = value;
                    setSelected();
                }
            }           
            override public function set data (value:Object) : void {
                if(value) {                    
                    _ownerData = value;
                    setSelected();
                }
            }
            override public function get data() : Object {
                return _ownerData;
            }            
            private function setSelected() : void {
                if (dataProvider && _ownerData) {
                    var col:DataGridListData = DataGridListData(listData);
                    for each (var dp:Object in dataProvider) {
                        if (dp[_lookupField] == _ownerData[col.dataField]) {
                            selectedItem = dp;
                            selectedItemKey = _ownerData[col.dataField];
                            return;     
                        }
                    }                    
                }
                selectedItem = null;
            }
            private function onSelectionChange (e:ListEvent) : void {
                if (selectedItem && _ownerData) {                    
                    var col:DataGridListData = DataGridListData(listData);
                    _ownerData[col.dataField] = selectedItem[_lookupField];
                    selectedItemKey = selectedItem[_lookupField];
                }
            }                   
        ]]>
    </mx:Script>    
</mx:ComboBox>

使用此组件是直截了当的.作为ItemRenderer：

<mx:DataGridColumn headerText="Child" dataField="PersonID" editable="false" textAlign="center">
  <mx:itemRenderer>
    <mx:Component>
      <fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT,true,true))"/>
    </mx:Component>
  </mx:itemRenderer>                      
</mx:DataGridColumn>

使用此组件是直截了当的.作为ItemEditor：

<mx:DataGridColumn labelFunction="lookupChildName" headerText="Child" dataField="PersonID" editable="true" editorDataField="selectedItemKey">
    <mx:itemEditor>
        <mx:Component>
            <fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT,true))"/>
        </mx:Component>
     </mx:itemEditor>      
</mx:DataGridColumn>

请注意,当将它用作ItemEditor时,必须使用自定义labelFunction(在我的情况下从PersonID中查找Name),否则只在字段未被编辑时才能看到网格中的键(不是问题)如果您的键/值相同).

请注意,就我而言,我希望项目聚焦事件能够传播以向用户提供即时反馈(我的DataGrid具有itemFocusOut =“handleChange()”),因此更改事件创建了ITEM_FOCUS_OUT事件.

请注意,当您不介意仅在用户单击要编辑的单元格时显示的ComboBox时,可能有更简单的方法将ComboBox作为ItemEditor.我想要的方法是在DataGrid中显示所有行的组合框,并且可编辑且具有良好的事件传播的通用方法.