Flex DataGrid avec ComboBox itemRenderer

Alors que Jeff réponse est une réponse partielle pour une approche de ce type (voir http://flex.gunua.com/?p=119 pour un exemple complet de cet être utilisé à bon escient), il n'est pas aussi général que je voulais.

Heureusement, j'ai enfin trouvé une certaine grande aide sur Des Experts De L'Échange (les réponses par hobbit72) décrit comment créer un composant personnalisé qui travaille dans une grille comme un ItemRenderer.
Je l'ai étendu que le code à également en charge l'utilisation de la zone de liste déroulante comme un ItemEditor. La composante à part entière est comme suit:

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

L'aide de ce composant est simple. Comme un 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>

L'aide de ce composant est simple. Et comme un 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>

Noter que lorsque vous l'utilisez comme un ItemEditor, une coutume labelFunction (qui recherche le Nom de la PersonID dans mon cas) doit être utilisé, sinon, vous ne voyez que la clé de la grille lorsque le champ n'est pas modifié (pas un problème si vos clés/valeurs sont les mêmes).

Noter que dans mon cas, je voulais que le point focus événement à propager jusqu'à fournir une rétroaction immédiate à l'utilisateur (mon DataGrid a itemFocusOut="handleChange()"), d'où la change cas de la création d'un ITEM_FOCUS_OUT événement.

Remarque qu'il y a probablement des moyens plus simples pour avoir une zone de liste déroulante comme un ItemEditor lorsque vous n'avez pas l'esprit la zone de liste déroulante ne s'affiche que lorsque l'utilisateur clique sur la cellule à modifier. L'approche que je voulais, c'était une façon générique pour afficher une liste déroulante dans une grille de données pour toutes les lignes, et d'être modifiable et décent événement propagation.

OriginalL'auteur Jamie Love

Dans mon cas, j'ai utilisé une étincelle datagrid où l'une des colonnes a une ItemRenderer qui utilise un DropDownListBox. Mon problème est que lorsque mon élément de la liste de changement, la DropDownLists n'est pas mis à jour avec le nouveau fournisseur. Pour résoudre ce problème, j'ai dû passer le dataProvider pour la DropDownListBox comme une partie des données (de la ItemRenderer), puis en remplaçant le setter de la données à affecter la DropDownlListBox du dataProvider. Probablement un peu de surcharge, mais si quelqu'un a une meilleure solution, s'il vous plaît laissez-moi savoir:

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

OriginalL'auteur Christo Smal