1

我对 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>
4

1 回答 1

1

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

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

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

在此处输入图像描述

<?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>
于 2013-01-29T10:08:40.180 回答