Flex:如何重用Item渲染器?

时间:2013-03-11 03:47:35

标签: flex datagrid flex4 itemrenderer

我有一个数据网格表,dataGrid表中的gridColumn调用“DropDownListItemRenderer”。使用相同的项目渲染器我想根据dataField名称更改下拉列表中的内容。因此,例如,如果dataField名称是颜色,则下拉列表将包含红色,蓝色,绿色等。如果dataField名称为furits,则下拉列表将包含不同的水果选项。

如果您查看我的项目渲染器中的代码。我试图通过创建一个名为dropDownListData的可绑定数组集合来完成上述操作。在覆盖集数据函数中,我得到dataField名称,使用数据字段名称,我相应地在数组集合中添加项目。

虽然在运行程序时下拉列表中填充了正确的数据。每次选择下拉列表时,下拉列表中的数据都会重复并增加。

我认为我没有使用正确的方法来做到这一点。有人能告诉我我是怎么做到的吗?请有人帮我这个吗?如果我的问题不明确,请告诉我,我会尝试改写它。

谢谢:)

这是我的MXML文件:

     <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 FrontEndObjects.ColourItems;         
        import mx.collections.ArrayCollection;          
        import spark.events.IndexChangeEvent;

        [Bindable]
        private var order:ArrayCollection = new ArrayCollection();  

        private function addOrder():void{               
            var orderItems:ColourItems = new ColourItems();
            order.addItem(orderItems);              
        }   

    ]]>
</fx:Script>    
<s:BorderContainer x="175" y="101" width="606" height="289">
    <s:DataGrid id="myDG" x="53" y="27" width="516" height="201" dataProvider="{order}"
                editable="true" variableRowHeight="true">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Order #" editable="true"/>             
                <s:GridColumn dataField="quant" headerText="Qty" editable="true"/>              
                <s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true" itemRenderer="myRenderers.DropDownListItemRenderer"/>  
                <s:GridColumn dataField="furits" headerText="Furits" editable="true" rendererIsEditable="true" itemRenderer="myRenderers.DropDownListItemRenderer"/>                                    
            </s:ArrayList> 
        </s:columns >
    </s:DataGrid>   
    <s:Button x="499" y="236" label="add" click="addOrder()" /> 
</s:BorderContainer>    

这是我的DropDownList项目Renderer:

   <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" clipAndEnableScrolling="true">    
<fx:Script>
    <![CDATA[           
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;           
        import spark.components.gridClasses.GridColumn;
        import spark.events.IndexChangeEvent;
        public  var cName:String;

        [Bindable]
        private var dropDownListData:ArrayCollection = new ArrayCollection();           

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

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

            super.data = value;
            cName = column.dataField;
            if(cName == "color"){
                dropDownListData.addItem("red");
                dropDownListData.addItem("blue");
                dropDownListData.addItem("green");
            }
            else if(cName == "furits"){
                dropDownListData.addItem("banana");
                dropDownListData.addItem("apple");
                dropDownListData.addItem("grapes");
            }
        }     
    ]]>
</fx:Script>    
<s:DropDownList id="cb" width="100%" change="onCbChange(event)" requireSelection="true"  dataProvider="{dropDownListData}"/>    

这是我的对象类:

public class ColourItems
{
    public var label1:String;
public var quant:String;
public var color:String;    
public var furits:String;       
}

2 个答案:

答案 0 :(得分:0)

在itemRenderer的setData方法中,您应该在执行addItem之前检查列表中已存在的数据

答案 1 :(得分:0)

您可以将目标列设置为可编辑:editable =“true”rendererIsEditable =“true”。当您单击单元格时,网格调用在itemrenderer中设置数据(值:对象)方法,您在下拉列表中添加项目的次数越来越多。您可以轻松将其修复为禁用可编辑的单元格:

<s:GridColumn dataField="color" headerText="Color" editable="false" itemRenderer="myRenderers.DropDownListItemRenderer"/>  
<s:GridColumn dataField="furits" headerText="Furits" editable="false" itemRenderer="myRenderers.DropDownListItemRenderer"/>