Flex中ItemRenderer项目渲染器的两个重要问题

在flex中项目渲染器是很重要的一种渲染手段

问题1：如何在应用程序中单击某一个Item，获取该Item的值

效果图如下，点击“视频”Item时，弹出“视频”两个字

两个解决办法

办法一：

在自定义的ItemRenderer组件的Click事件中分发事件

dispatchEvent( new Event("itemClick",  true));

注意后面的true，此处表示取用事件冒泡，这一点非常重要！！

在调用自定义ItemRenderer组件的应用程序文件中，添加监听事件

addEventListener("itemClick",onItemClick); 

接着定义onItemClick方法

private function onItemClick(event:MyEvent): void
{
    Alert.show((event.target as ItemRenderer).data.txt);
}

如果在自定义的ItemRenderer组件中没有取用事件冒泡的话，event.target的类型就不为ItemRenderer了，呵呵。

方法二：

自定义事件MyEvent

package events
{
     import flash.events.Event;
    
     public  class MyEvent  extends Event
    {
         private var _data:Object;
        
         public function MyEvent(type:String, data:Object= null, bubbles:Boolean= false, cancelable:Boolean= false)
        {
             super(type, bubbles, cancelable);
             this._data = data;
        }
         public function get data():Object
        {
             return  this._data;
        }
         public function set data(data:Object): void
        {
             this._data = data;
        }
    }
}

在自定义ItemRenderer组件的Click事件中分发事件

dispatchEvent( new MyEvent("itemClick", data.txt,  true));

注意这里将data.txt数据也添加到分发的事件参数里面去了

当然在这个自定义ItemRenderer组件文件中要声明itemClick是一个事件

<fx:Metadata>
    [Event(name="itemClick",type="events.MyEvent")]
</fx:Metadata>

在调用自定义ItemRenderer组件的应用程序文件中，添加监听事件

addEventListener("itemClick",onItemClick); 

 接着定义onItemClick方法 

private function onItemClick(event:MyEvent): void
{
    Alert.show(event.data as String);    
}

OK，搞定！

 

问题2：如何动态修改某个Item的值

 实现的效果图如下。

本例采用的是ArrayList作为数据源绑定的方法，并且该ArrayList是有Object组成的

[Bindable]
private var arr:ArrayList =  new ArrayList();

arr.addItem({src:'assets/images/f_menu_34.png', txt:'新闻'});
arr.addItem({src:'assets/images/f_menu_36.png', txt:'网页'});
arr.addItem({src:'assets/images/f_menu_38.png', txt:'贴吧'});
arr.addItem({src:'assets/images/f_menu_40.png', txt:'知道'});
arr.addItem({src:'assets/images/f_menu_42.png', txt:'MP3'});
arr.addItem({src:'assets/images/f_menu_44.png', txt:'图片'});
arr.addItem({src:'assets/images/f_menu_46.png', txt:'视频'});
arr.addItem({src:'assets/images/f_menu_48.png', txt:'地图'});

在编译的时候，会发出一些警告

大致是说object不是IEventDispatcher类型的，不能绑定属性src和txt

也就是说当我们动态改变src和txt值的时候，系统是不会自动更新的

肿么办呢？

 两个解决方法

方法一：

 使用ObjectProxy代理类代理Object对象

arr.addItem( new ObjectProxy({src:'assets/images/f_menu_34.png', txt:'新闻'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_36.png', txt:'网页'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_38.png', txt:'贴吧'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_40.png', txt:'知道'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_42.png', txt:'MP3'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_44.png', txt:'图片'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_46.png', txt:'视频'}));
arr.addItem( new ObjectProxy({src:'assets/images/f_menu_48.png', txt:'地图'}));

在button的Click事件中修改Item的值即可 

private function changeValue(event:MouseEvent): void
{
    arr.getItemAt( int(textInput.text)).txt = textInput2.text;
}

 

 方法二：

 既然说object不是IEventDispatcher类型的，我们现在就构造一个继承IEventDispatcher类型的类CustomMenu

package
{
    
     import flash.events.EventDispatcher;
    
    [Bindable]
    
     public  class CustomMenu  extends EventDispatcher
    {
         public var src:String;
         public var txt:String;
    }
    
}

构造数据源

[Bindable]
private var arr:ArrayList =  new ArrayList();

var cm:CustomMenu =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_34.png';
cm.txt='新闻';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_36.png';
cm.txt='网页';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_38.png';
cm.txt='贴吧';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_40.png';
cm.txt='知道';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_42.png';
cm.txt='MP3';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_44.png';
cm.txt='图片';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_46.png';
cm.txt='视频';
arr.addItem(cm);
cm =  new CustomMenu(); 
cm.src = 'assets/images/f_menu_48.png';
cm.txt='地图';
arr.addItem(cm);

同样在button的Click事件中修改Item的值即可 

private function changeValue(event:MouseEvent): void
{
    arr.getItemAt( int(textInput.text)).txt = textInput2.text;
}

 

搞定，，睡觉

转载于:https://www.cnblogs.com/gisland/archive/2011/09/24/2188311.html