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

Flex中ItemRenderer项目渲染器的两个重要问题相关推荐

Flex组件的项目渲染器(ItemRenderer)使用总结
系列文章导航 Flex,Fms3相关文章索引 Air版免费视频成人聊天室,免费网络远程视频会议系统((Flex,Fms3联合打造)) Flex中提供了大量用于数据呈现的组件,这其中,以List系列组件 ...
Android App开发手机阅读中PDF文件渲染器的讲解及使用（附源码简单易懂）
需要源码和图片集请点赞关注收藏后评论区留言~~~ 一.PDF文件渲染器 Android集成了PDF的渲染操作,从很大程度上方便了开发者,这个PDF文件渲染器便是PdfRenderer.渲染器允许从存储 ...
maya 中切换当前渲染器的方法和设置
切换渲染器主流渲染器有 arnold,vray,redshift 使用脚本为 import maya.cmds as cmdscmds.setAttr('defaultRenderGlobals.r ...
python中实现上下文管理器的两种方法
上下文管理器: python中实现了__enter__和__exit__方法的对象就可以称之为上下文管理器实现方法一举例: def File(object): def __init__(self, ...
Java中BorderLayout布局管理器的两种排列实现方式
java中Frame类默认的布局管理器为BorderLayout,其主要是将Frame窗口分为东西南北中五个区域,每个区域仅限于放一个组件,如加入多个,前免得会被覆盖,解决方法为:可以在一个区域中加入 ...
matlab三角形分割,MATLAB 2014b及以上版本中带有画家渲染器的三角形拆分补丁
在解决实际问题之前,这是一个值得怀疑的解决方法: 对角线只是三角形之间的空白区域,所以我们看到的是补丁后面的白色空间.愚蠢的想法: 让我们用匹配的颜色填充该空间而不是白色. 为此,我们将复制所有对象, ...
C4D中使用Redshift渲染器翻转贴图
1.勾选UV标签中的 Mirror U (或者 Mirror V) 2.对应在Offset 的U值中(当勾选Mirror U时,在第二个值中)填写1 说明:官网对 Mirror U(Mirror V) ...
自定义 Spark item 的渲染器
在 DAtaGroup , SkinnableDataContainer 或它们的子类中定义自己的项目渲染器可以控制数据项的显示外观,数据项的外观包括字体.背景色.边界和其他的可视方面.项目渲染器也可 ...
[转]HDR渲染器的实现(基于OpenGL)
http://dev.gameres.com/Program/Visual/3D/HDRTutorial/HDRTutorial.htm 作者:何咏(欢迎和大家交流,我的QQ:35574585,Ema ...

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

Flex中ItemRenderer项目渲染器的两个重要问题相关推荐

最新文章

热门文章