Apache flex 如何在FlexDataGrid中显示DropDownList组件？

我对flex很陌生。我已经成功地在我的dataGrid表中添加了dropDownList。dropDownList运行良好。因为我是为用户做这件事的。我希望能够在dataGrid表中看到dropDowList组件/图标本身，而不是单击单元格，然后出现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>

红色
蓝色
绿色

您可以使用ItemRenderer而不是ItemEditor。在这种情况下，应该将GridColumn的RenderIseditable属性设置为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>

红色
蓝色
绿色

您可以使用ItemRenderer而不是ItemEditor。在这种情况下，应该将GridColumn的RenderIseditable属性设置为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>

红色
蓝色
绿色

非常感谢您！这真的很有帮助，我真的很感激。但是如果我想在不接触dropdownlist的情况下获取值，该怎么办？说红色是我想要的颜色，因为它已经显现出来了。用户不会更改它。做那件事还有别的办法吗？另外，我想问uPlus我想问你，如果你看到我上面的代码，有一些覆盖方法，比如getValue setValue和save for the dropDown list，我怎么知道存在这样的方法，我可以覆盖它们？我在哪里可以找到这些方法？我尝试右键单击，然后转到source>override方法。我没有看到任何名为get、set value或save的方法。请告诉我，我试过阅读课本和在线flex帮助。我似乎还是不明白。再次感谢你。：）你好关于第二个问题：据我所知，如果使用内联渲染器，则无法看到可重写的方法。我认为方法列表是根据应用范围生成的。相反，您可以尝试使用外部渲染器，然后通过“source>override methods”菜单可以很好地看到其方法。对于第一个问题：您的意思是，您可以在无需用户交互的情况下读取值吗？您总是可以求助于您的数据模型（在您的例子中是myDP），并像这样读取它的值：myDP.getItemAt（1.color）。如果我误解了你的问题，请给我更具体的解释。嗨！是的，我想问你，当没有用户交互时，我是否可以读取下拉列表中的值。因此，如果下拉列表中的第一个值是红色，并且用户想要红色，那么他将不会与下拉列表交互。发生这种情况时，如何在下拉列表中捕获值？我怎么知道他没有触发下拉列表以便我可以将红色作为我的值？如果不清楚，请告诉我。我会尝试重新措辞。非常感谢非常感谢你！这真的很有帮助，我真的很感激。但是如果我想在不接触dropdownlist的情况下获取值，该怎么办？说红色是我想要的颜色，因为它已经显现出来了。用户不会更改它。做那件事还有别的办法吗？另外，我想问uPlus我想问你，如果你看到我上面的代码，有一些覆盖方法，比如getValue setValue和save for the dropDown list，我怎么知道存在这样的方法，我可以覆盖它们？我在哪里可以找到这些方法？我尝试右键单击，然后转到source>override方法。我没有看到任何名为get、set value或save的方法。请允许我试着阅读课本和在线f