Flex DataGrid mit ComboBox-itemRenderer

Während Jeff ' s Antwort ist eine partielle Antwort für den ein Ansatz (siehe http://flex.gunua.com/?p=119 ein vollständiges Beispiel für diese wird verwendet, um gute Wirkung), es ist nicht so allgemein wie ich wollte.

Glücklicherweise fand ich endlich ein paar große Hilfe auf Experten Austauschen (die Antworten von hobbit72) beschreibt, wie eine benutzerdefinierte Komponente erstellen, die in einem raster als ItemRenderer.
Ich habe verlängert, dass der code auch Unterstützung mit Hilfe der combo-box als ItemEditor als gut. Die full-Komponente ist wie folgt:

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

Verwendung dieser Komponente ist straight forward. Als 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>

Verwendung dieser Komponente ist straight forward. Und als 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>

Beachten Sie, dass, wenn Sie es als eine ItemEditor, eine benutzerdefinierte labelFunction - (sieht, dass sich der Name aus der PersonID in meinem Fall) muss verwendet werden, sonst sehen Sie nur den Schlüssel in der Startaufstellung, wenn das Feld nicht bearbeitet (kein problem, wenn Sie Ihre Schlüssel/Werte sind die gleichen).

Beachten Sie, dass in meinem Fall, ich wollte das item Fokus-out-Ereignis zu propagieren bis zu Ihnen sofortige Rückmeldung an den Benutzer (mein DataGrid hat itemFocusOut="handleChange()"), daher der change Ereignis erstellen einer ITEM_FOCUS_OUT-Ereignis.

Beachten Sie, dass es gibt wahrscheinlich einfachere Möglichkeiten, um eine ComboBox als ItemEditor, wenn Sie nichts dagegen haben die ComboBox wird nur angezeigt, wenn der Benutzer klickt auf die Zelle zu Bearbeiten. Der Ansatz, den ich wollte, war eine Allgemeine Möglichkeit, zu zeigen, ein Kombinationsfeld in einem DataGrid für alle Zeilen, und bearbeitet und mit anständigen event-Propagierung.

In meinem Fall habe ich eine spark-datagrid-wo eine der Spalten hat eine ItemRenderer-nutzt eine DropDownListBox. Mein problem war, dass, als mein Artikel-Liste ändern, die DropDownLists nicht aktualisiert mit der neuen dataProvider. Um dieses Problem zu lösen, ich musste die dataProvider für die DropDownListBox als Teil der Daten (der ItemRenderer), und dann durch überschreiben der setter die Daten nur ordnen Sie die DropDownlListBox die dataProvider. Wahrscheinlich ein bisschen Aufwand, aber wenn jemand eine bessere Lösung haben, bitte lassen Sie mich wissen:

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