带ComboBox项呈现器的灵活数据报

而Jeff的答案只是一种方法的部分答案(参见 http://flex.gunua.com/?p=119 作为一个完整的例子,它被用来取得良好的效果),它并不像我想要的那样一般。

谢天谢地,我终于在 Experts Exchange (Hobbit72的答案)描述了如何创建一个在网格中作为项渲染器工作的自定义组件。 我已经扩展了代码以支持将组合框用作项编辑器。完整组件如下:

<?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> 

使用此组件是直接向前的。作为项呈现程序:

<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>

使用此组件是直接向前的。作为项目编辑器:

<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>

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

注意,在我的例子中,我希望项目焦点输出事件能够向用户提供即时反馈(我的数据报 itemFocusOut="handleChange()" ) change 事件创建项目焦点事件。

请注意,当您不介意组合框仅在用户单击要编辑的单元格时显示时,将组合框作为项编辑器可能有更简单的方法。我想要的方法是在数据报中为所有行显示一个组合框的通用方法,并且是可编辑的,并且具有适当的事件优先级。

向数据报添加itemrenders的最简单方法是创建自定义MXML组件。在您的情况下,将画布、HBox或Vbox作为自定义组件,并将组合框作为子项添加。在DataGrid本身上设置DataProvider,并将itemRenderer分配给列,然后重写itemRenderer的set data函数以访问该实例的给定数据提供程序中的所有数据,如下所示:

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[

        override public function set data(value:Object):void{
                    trace(value.data);
                    trace(value.name);
        }
    ]]>
   </mx:Script>

<mx:ComboBox width="100%" height="100%" id="myComboBox"/>
 </mx:HBox>

将为项呈现器的每个实例调用此方法

在我的例子中,我使用了Spark DataGrid,其中一列有一个使用DropDownListBox的项呈现器。我的问题是,当我的项目列表更改时,DropDownList不会用新的数据提供程序进行更新。为了解决这个问题,我必须将DropDownListBox的数据提供程序作为数据的一部分(项渲染器)传递,然后通过重写数据的设置器来分配DropDownListBox的数据提供程序。可能有点开销,但是如果有人有更好的解决方案,请告诉我:

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        override public function set data(v : Object) : void {
            super.data = v;
            if (v == null)
                return;
            dropDown.dataProvider = data.dataProvider;
        }
    ]]>
</fx:Script>
<s:DropDownList id="dropDown" width="100%" height="100%" dataProvider="{data.dataProvider}" labelField="name"/>