Simple way to call a function inside itemRenderer in a Spark List, from the main application

Question

I have a main application that contains a list, using a custom itemRenderer to display data.

I would like to be able to call a function, inside the itemRenderer, from the main application.

When running the app, we have a list with three persons, and a button. I want to call the function myItemRendererFunction() inside the itemRenderer, of the selected item in the list, all this, from the main app.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var _dp:ArrayCollection = new ArrayCollection([
                {firstname: "Bob", lastname: "Smith"},
                {firstname: "Gerard", lastname: "Pearson"},
                {firstname: "Peter", lastname: "Bell"}
            ]);

            protected function checkAll():void
            {
                // Here I want to call the "myItemRendererFunction()" function
                // inside the itemRenderer of the selected row
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
    </s:layout>

    <s:List id="myList" width="100%" height="100%" dataProvider="{_dp}" itemRenderer="renderers.FriendDisplayRenderer"/>

    <s:Button label="Check All for selected item" click="checkAll()"/>

</s:WindowedApplication>

And now, my itemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true">

    <fx:Script>
        <![CDATA[

            public function myItemRendererFunction():void
            {
                chk_1.selected = true;
                chk_2.selected = true;
                chk_3.selected = true;
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
    </s:layout>

    <s:Label text="{data.firstname} {data.lastname}" width="150"/>

    <s:CheckBox id="chk_1" label="Likes hockey"/>
    <s:CheckBox id="chk_2" label="Likes baseball"/>
    <s:CheckBox id="chk_3" label="Likes football"/>

</s:ItemRenderer>

Thanks for the help !!!!

Answer 1

Renderers will render depending on the data that is provided.
So all you really have to do is change the data and re-render.

[Bindable]
private var _dp:ArrayCollection = new ArrayCollection([
  {firstname: "Bob",    lastname: "Smith",   chk_1:false, chk_2:false, chk_3:false},
  {firstname: "Gerard", lastname: "Pearson", chk_1:false, chk_2:false, chk_3:false},
  {firstname: "Peter",  lastname: "Bell",    chk_1:false, chk_2:false, chk_3:false},
]);

protected function checkAll():void{
  // Here I want to call the "myItemRendererFunction()" function
  // inside the itemRenderer of the selected row
  for each( var obj:Object in this._dp ){
   obj.chk_1= true;
   obj.chk_2= true;
   obj.chk_3= true;
  }
  this._dp.refresh( );
}




// in your renderer add this
override protected function commitProperties():void{
  chk_1.selected = this.data.chk_1;
  chk_2.selected = this.data.chk_2;
  chk_3.selected = this.data.chk_3;
}