Flex DataGrid与ComboBox itemRenderer

我正在努力找出在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同时包含’data’和’label’字段(根据ComboBox的原因 – 为什么它不提供labelField和idField,我永远不会知道).

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

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

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

解决方法

虽然杰夫的回答是一种方法的部分答案(请参阅 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))"/>
        </mx:Component>
     </mx:itemEditor>      
</mx:DataGridColumn>

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

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

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

原文链接：/flex/174251.html

Flex DataGrid与ComboBox itemRenderer

解决方法

猜你在找的Flex相关文章