我正在努力找出在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 DataGrid与ComboBox itemRenderer的更多相关文章

  1. easy ui datagrid 从编辑框中获取值的方法

    下面小编就为大家带来一篇easy ui datagrid 从编辑框中获取值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧

  3. easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. Easyui Datagrid自定义按钮列(最后面的操作列)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,下面我们来自定义按钮列,具体实现代码,大家参考下本文吧

  5. PHP – EasyUI DataGrid 资料取的方式介绍

    EasyUI DataGrid 是一个用 Jquery 写的 DataGrid,由此可知,是一个 前端 Web UI 技术;当要对该 DataGrid 操作时,在传递参数到后端,重新产生整各网页

  6. EasyUI的DataGrid每行数据添加操作按钮的实现代码

    今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,怎么实现此功能呢?下面小编给大家带来了EasyUI的DataGrid每行数据添加操作按钮的实现代码,需要的朋友参考下吧

  7. jQuery easyUI datagrid 增加求和统计行的实现代码

    下面小编就为大家带来一篇jQuery easyUI datagrid 增加求和统计行的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    本篇文章主要介绍了jquery Easyui Datagrid实现批量操作(编辑,删除,添加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. jquery easyui DataGrid简单示例

    本篇文章主要介绍了jquery easyui DataGrid简单示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. EasyUI 数据表格datagrid列自适应内容宽度的实现

    这篇文章主要介绍了EasyUI 数据表格datagrid列自适应内容宽度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. arcgis api for flex之专题图制作饼状图,柱状图等

    总结以上是DEVMAX为你收集整理的arcgisapiforflex之专题图制作饼状图,柱状图等全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  2. arcgis for flex或silverlight全国地图天气预报的实现

    总结以上是DEVMAX为你收集整理的arcgisforflex或silverlight全国地图天气预报的实现全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  3. 天津政府应急系统之GIS一张图arcgis api for flex讲解十一路径导航模块

    总结以上是DEVMAX为你收集整理的天津政府应急系统之GIS一张图arcgisapiforflex讲解十一路径导航模块全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  4. arcgis for flex全国地图天气预报的具体实现过程解析

    总结以上是DEVMAX为你收集整理的arcgisforflex全国地图天气预报的具体实现过程解析全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  5. 天津政府应急系统之GIS一张图arcgis api for flex讲解四地图导航控件模块

    总结以上是DEVMAX为你收集整理的天津政府应急系统之GIS一张图arcgisapiforflex讲解四地图导航控件模块全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  6. BlazeDS

    总结以上是DEVMAX为你收集整理的BlazeDS全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  7. 【Flex】读取本地XML,然后XML数据转成JSON数据

    总结以上是DEVMAX为你收集整理的读取本地XML,然后XML数据转成JSON数据全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  8. 【Flex】读取本地JSON,然后JSON数据转成XML数据

    总结以上是DEVMAX为你收集整理的读取本地JSON,然后JSON数据转成XML数据全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  9. 【Flex】编辑器的缩放功能绝对定位和相对定位

    总结以上是DEVMAX为你收集整理的编辑器的缩放功能绝对定位和相对定位全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. 如何实现一个自己的嵌入式语言y

    总结以上是DEVMAX为你收集整理的如何实现一个自己的嵌入式语言y全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

返回
顶部