Flex DataGrid与ComboBox itemRenderer

Question

我正在努力找出在Flex(3.4)DataGrid中嵌入ComboBox的"正确"方法.通过权利(例如根据这个页面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"数据"和"标签"字段在哪里(根据什么ComboBox- 为什么它不提供labelField和idField,我永远不会知道).

无论如何,上面的MXML代码不能以两种方式工作:

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

那么,有没有人有类似的情况工作？

Answer 1

虽然杰夫的回答是针对这种方法的部分答案(请参阅http://flex.gunua.com/?p=119以获得有效的完整示例),但它并不像我想要的那样通用.

值得庆幸的是,我终于在专家交流中找到了一些很好的帮助(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中查找Name),否则只有在未编辑字段时才能看到网格中的键(不是问题)如果您的键/值相同).

请注意,就我而言,我希望项目聚焦事件能够传播给用户提供即时反馈(我的DataGrid有itemFocusOut="handleChange()"),因此change事件创建了一个ITEM_FOCUS_OUT事件.

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