我对上面链接的示例的区别在于我的显示值(用户看到的内容)与我想要选择并存储在我的数据提供程序中的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代码不能以两种方式工作:
>组合框不会显示任何选定的项目.
>选择项目后,它不会将所选项目存储回数据存储区.
那么,有没有人有类似的情况工作?
解决方法
值得庆幸的是,我终于在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中显示所有行的组合框,并且可编辑且具有良好的事件传播的通用方法.