Flex mx：DataGrid - 創建組合框ItemRenderer

Question

我有一個mx：Datagrid女巫我想添加一個組合框作爲項目渲染器。

<mx:DataGrid id="dgEnsActes" 
          horizontalScrollPolicy="on" 
          dataProvider="{arListeDevis}" 
          width="100%" height="100%" > 
        <mx:columns> 
         <mx:DataGridColumn dataField="dvIndex" headerText="" headerStyleName="dgHeader" fontWeight="normal" width="40"/> 
         <mx:DataGridColumn dataField="dvLibelle" headerText="Libellé" headerStyleName="dgHeader" wordWrap="true" fontWeight="normal" width="180"/> 
         <mx:DataGridColumn dataField="dvTotal" headerText="Total" headerStyleName="dgHeader" width="60" fontWeight="normal"/> 
         <mx:DataGridColumn dataField="dvStatut" headerText="Statut" 
              rendererIsEditor="true" editorDataField="result" itemRenderer="fr.inters.ui.itemRenderer.irComboEtatDevis" 
              wordWrap="true" headerStyleName="dgHeader" fontWeight="normal" width="70"/> 
         <mx:DataGridColumn dataField="dvAcceptDirect" headerText="Création" headerStyleName="dgHeader" width="60" fontWeight="normal"/> 

        </mx:columns> 

       </mx:DataGrid> 

我的自定義項目渲染是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          focusEnabled="true"> 


    <fx:Script> 
     <![CDATA[ 
      public var result:String=""; 
      [Bindable] var dpValue:Array=[ 
       {label:"Accepté", data:"Accepté"}, 
       {label:"Refusé", data: "Refusé"}, 
       {label:"En attente", data: "En attente"}]; 


      override public function set data(value:Object):void 
      { 
       super.data = value; 
       if (value != null) 
       { 
        var currentValue:String = value.size; 
        var len:int = dpValue.length; 
        for (var i:int = 0; i < len; i++) 
        { 
         if (dpValue[i].data == currentValue) 
         { 
          editor.selectedIndex = i; 
          break; 
         } 
        } 
       } 
      } 

      public function onChange():void 
      { 
       var index:int = editor.selectedIndex; 
       result = dpValue[index].data; 
      } 


     ]]> 
    </fx:Script> 
    <mx:ComboBox id="editor" dataProvider="{dpValue}" width="130" change="onChange()"/> 

</s:MXDataGridItemRenderer> 

但是，當我嘗試調試一個錯誤出現，該消息是selectedIndex is undefined

是有人幫我嗎？

謝謝

Answer 1

爲什麼不使用沒有柵格項呈示器的組合框？

看看這個樣品在http://blog.flexmp.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
     <mx:XML id="xml" source="weather.xml"/> 
     <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}" 
       variableRowHeight="true" editable="true" rowHeight="50" 
       width="300" height="300"> 
       <mx:columns> 
       <mx:DataGridColumn dataField="Location"/> 
       <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value"> 
         <mx:itemEditor> 
           <mx:Component> 
             <mx:ComboBox editable="true"> 
               <mx:dataProvider> 
                 <mx:String>Mild</mx:String> 
                 <mx:String>Hot</mx:String> 
                 <mx:String>Foggy</mx:String> 
                 <mx:String>Rainy</mx:String> 
                 <mx:String>Snow</mx:String> 
               </mx:dataProvider> 
             </mx:ComboBox> 
           </mx:Component> 
         </mx:itemEditor> 
       </mx:DataGridColumn> 
       <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value" 
         itemEditor="CloudCover"/> 
     </mx:columns> 
     </mx:DataGrid> 
</mx:Application> 

Answer 2

這可能是最好的例子

https://bytebucket.org/trilogy/flex-datagrid-with-dropdown-menu-combobox-item-editor/raw/0de0e1e0cd2f0bb99512aedb920eaa0d6055e359/bin/main.swf

雙擊第二列

源代碼https://bitbucket.org/trilogy/flex-datagrid-with-dropdown-menu-combobox-item-editor/src