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

It's pretty hard to get a hold of an ItemRenderer with Spark Lists (used to be easier in mx). But anyway: feels like fishy architecture to me. Why not use events instead? — RIAstar
@RIAstar If it's the good way to go.. :-) I'm relatively new to FB. How can an itemRenderer listen to a custom event? — Jivago
That wouldn't actually be my first approach either. What is it exactly that you want to do? i.e. how do you want your list to behave? There's probably an easier solution. — RIAstar

The_asMan The_asMan · Accepted Answer · 2011-09-01T21:17:23

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

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

1 Answers