如何在Flex DataGrid中显示DropDownList组件？

Question

我很新兴。我已成功在我的dataGrid表中添加了dropDownList .dropdownList工作正常。它只是因为我为用户这样做。我希望能够在dataGrid表中看到dropDowList组件/ Icon本身，而不是单击单元格然后出现dropDownList供我选择。我有可能实现这个目标吗？我必须使用弹性皮肤或其他东西吗？请指导我如何才能实现这一点，请尽可能给我一个例子。

由于 雷卡

这是我现在的代码：

 <fx:Script>
    <![CDATA[                
        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;
        import mx.controls.Alert;
        [Bindable]
        private var myDP:ArrayCollection = new ArrayCollection([
            {label1:"Order #2314", quant:3, color:'red'},
            {label1:"Order #2315", quant:3, color:'red'}                
        ]);         
    ]]>
</fx:Script>

<s:DataGrid id="myDG" x="29" y="33" width="393" height="151" dataProvider="{myDP}"
            editable="true" variableRowHeight="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="label1" headerText="Order #" editable="false"/>                
            <s:GridColumn dataField="quant" headerText="Qty" editable="true"/>

            <s:GridColumn dataField="color" headerText="Color" editable="true">                     
                <s:itemEditor>
                    <fx:Component>                              
                        <s:GridItemEditor>              
                            <fx:Script>
                                <![CDATA[

                                    import mx.core.FlexGlobals;
                                    import mx.events.FlexEvent;

                                    import spark.events.IndexChangeEvent;

                                    override public function set value(newValue:Object):void {

                                        cb.selectedItem = newValue;
                                    }

                                    override public function get value():Object {
                                        return cb.selectedItem.toString();
                                    }

                                    override public function setFocus():void {
                                        cb.setFocus();
                                    }

                                    override public function save():Boolean
                                    {
                                        data[column.dataField] = value;                                     
                                        return true;
                                    }
                                ]]>
                            </fx:Script>
                            <s:DropDownList id="cb" requireSelection="true" skinClass="MySkins.mytestddbSkin">
                                <s:dataProvider>
                                    <s:ArrayCollection>
                                        <fx:String>red</fx:String>
                                        <fx:String>blue</fx:String>
                                        <fx:String>green</fx:String>
                                    </s:ArrayCollection>                                        
                                </s:dataProvider>
                            </s:DropDownList>                               
                        </s:GridItemEditor>                         
                    </fx:Component>
                </s:itemEditor>             
            </s:GridColumn> 

        </s:ArrayList> 
    </s:columns >
</s:DataGrid>

Answer 1

您可以使用ItemRenderer而不是ItemEditor。在这种情况下，您应该将GridColumn的rendererIsEditable属性设置为true。

然后，您可以使用DropDownList的change事件，在数据提供者中注册更改。

我已经添加了两次颜色列，让您看到在选择后实际编辑了数据。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">
<fx:Script>
    <![CDATA[                
        import mx.collections.ArrayCollection;

        [Bindable]private var myDP:ArrayCollection = new ArrayCollection([
            {label1:"Order #2314", quant:3, color:'red'},
            {label1:"Order #2315", quant:3, color:'red'}                
        ]);         
    ]]>
</fx:Script>

<s:DataGrid id="myDG" x="29" y="33" height="151" dataProvider="{myDP}"
            editable="true" variableRowHeight="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="label1" headerText="Order #" editable="false"/>                
            <s:GridColumn dataField="quant" headerText="Qty" editable="true"/>

            <s:GridColumn dataField="color" headerText="Color" editable="true" width="120"/>       

            <s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true" width="180">
                <s:itemRenderer>
                <fx:Component>
                    <s:GridItemRenderer>
                        <fx:Script>
                            <![CDATA[
                                import spark.events.IndexChangeEvent;

                                protected function onCbChange(event:IndexChangeEvent):void
                                {
                                    var value:String = (event.currentTarget as DropDownList).selectedItem;
                                    data[column.dataField] = value; 
                                }
                            ]]>
                        </fx:Script>

                        <s:DropDownList id="cb" requireSelection="true" width="100%" change="onCbChange(event)">
                            <s:dataProvider>
                                <s:ArrayCollection>
                                    <fx:String>red</fx:String>
                                    <fx:String>blue</fx:String>
                                    <fx:String>green</fx:String>
                                </s:ArrayCollection>                                        
                            </s:dataProvider>
                        </s:DropDownList>   

                    </s:GridItemRenderer>
                </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>

        </s:ArrayList> 
    </s:columns >
</s:DataGrid>

</s:Application>