从主应用程序调用 Spark 列表中 itemRenderer 内的函数的简单方法

Question

我有一个包含列表的主应用程序，使用自定义 itemRenderer 来显示数据。

我希望能够从主应用程序调用 itemRenderer 内的函数。

运行应用程序时，我们有一个包含三个人的列表和一个按钮。我想在 itemRenderer 中调用函数 myItemRendererFunction()，列表中的选定项目，所有这些，从主应用程序。

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

现在，我的 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>

感谢您的帮助！！！！

Answer 1

渲染器将根据提供的数据进行渲染。
因此，您真正需要做的就是更改数据并重新渲染。

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