Flex : How to reuse Item renderer?

Question

I have a data grid table, the gridColumn in the dataGrid table calls a "DropDownListItemRenderer". Using the same item renderer I want to change the contents in the drop down list according to the dataField name. So for example if the dataField name is colour then the drop down will contain red,blue,green ect. If the dataField name is furits, then the drop down list will contain different fruits options.

If u look at the codes in my item Renderer. I tried to do the above by creating a bindable array collection called dropDownListData. In the override set data function I get the dataField name, Using the data field name I add items in array collection accordingly.

Although the dropdown list is filled with the correct data when u run the program. The data in the drop down list is repeated and increased every time when the dropdown list is selected.

I think I am not using the right method to do this. So can someone show me how I do this ? Pls can someone help me with this ? Pls let me know if my question is not clear I will try to rephrase it.

Thanks :)

This is my MXML file :

     <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>

This is my DropDownList item 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}"/>

This is my Object class :

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

Difficult understand this code, please create "one based file" example — Ilya Zaytsev
Hi llya ! By "one based file" do u mean put everything in one MXML file ? For now, I have edited my question again to show all my codes. U can copy paste the code and run on ur pc. I have a MXML file, a Item renderer file and a colourItems class. Hope this is more clear. Pls let me know what I can do to make my codes more clearer to you. Thanks:) — user2017147

Drenai Drenai · Accepted Answer · 2013-03-13T10:28:27

In the setData method of the itemRenderer, you should check what data already exists in the list before doing the addItem

Flex : How to reuse Item renderer?

2 Answers