datagrid - Flex DataGrid 与 ComboBox itemRenderer

Question

我将尝试找出将 ComboBox 嵌入到 Flex (3.4) DataGrid 中的“正确”方法。根据权利(例如，根据本页 http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/ )，这应该很容易，但我一生都无法完成这项工作。

与上面链接的示例的区别在于，我的显示值(用户看到的值)与我想要选择并存储在数据提供程序中的 id 值不同。

所以我所拥有的是:

<mx:DataGridColumn headerText="Type" width="200" dataField="TransactionTypeID" editorDataField="value" textAlign="center" editable="true" rendererIsEditor="true">
    <mx:itemRenderer>
        <mx:Component>
            <mx:ComboBox dataProvider="{parentDocument.transactionTypesData}"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

其中transactionTypesData同时具有“data”和“label”字段(根据ComboBox - 为什么它不提供labelField和idField我永远不会知道)。

无论如何，上面的 MXML 代码在以下两种情况下不起作用:

1. 组合框不显示任何选定的项目。
2. 选择某个项目后，它不会将该所选项目存储回数据存储区。

那么，有人遇到过类似的情况吗？

Answer 1

虽然 Jeff 的回答是对此方法的部分回答(请参阅 http://flex.gunua.com/?p=119 以获取使用此方法取得良好效果的完整示例)，但它并不像我想要的那么普遍。

值得庆幸的是，我终于在 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, true))"/>
        </mx:Component>
     </mx:itemEditor>      
</mx:DataGridColumn>

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

请注意，就我而言，我希望传播项目焦点事件以向用户提供即时反馈(我的 DataGrid 有 itemFocusOut="handleChange()")，因此 change 事件创建 ITEM_FOCUS_OUT 事件。

请注意，如果您不介意仅在用户单击要编辑的单元格时显示组合框，则可能有更简单的方法将组合框用作项目编辑器。我想要的方法是一种在 DataGrid 中显示所有行的组合框的通用方法，并且可编辑且具有良好的事件传播功能。