Flex组件的项目渲染器(ItemRenderer)使用总结
http://blog.csdn.net/babylon_0049/archive/2009/05/22/4205484.aspx
理解 Flex itemRenderer – 第 1 部分: 内联渲染器
http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html
理解 Flex itemRenderer – 第 2 部分: 外部渲染器
http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt2.html
首先简单说下外部渲染器的优势:
(1)itemRenderer 可轻松用于多个列表中
(2)代码更容易维护
(3)可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
内外渲染器在使用上只是地方不同,用法基本一样,下面详细介绍内联渲染器的用法:
注:itemRenderer 是循环使用的,只负责处理收到的数据
itemRenderer中使用事件的三种方法:
一、在外部调用事件:
至于怎样在项目渲染器访问主调用应用中的成员,可用parentDocument来引用;
反过来,主调用应用要访问项目渲染器中的成员,一般都是通过在项目渲染器先派发事件,然后在主调用应用中注册事件侦听器来实现。
例如:在项目渲染器中点击图片事件,然后通知主调用应用
<mx:Image click=”this.parentDocument.imgclick(event)”
data=”{data.label}” source=”assets\tx.JPG” width=”40″/>
在主调用应用中定义:
public function imgclick(evt:MouseEvent):void
{
var img:Image=evt.currentTarget as Image;
Alert.show(img.data.toString());
}
记住得是public的,不同类之间是无法访问私有方法的
二、直接在itemRenderer中内嵌事件:
如果在Component中直接定义事件,为报错:....(event)是一个为定义的方法.
这是因为所定义的事件是在文件的范围内而不是在<mx:Component>在作用范围内定义的,
使用outerDocument标识可以避开这个问题。
outerDocument标识符将作用范围更改为查找文件或外部文档, 并引用<mx:Component>。
<mx:Button label=”Buy” click=”outerDocument.buyBook(data)” />
现在请注意: 这个函数必须是公共函数, 而不是受保护或私有函数。
记住, <mx:Component>被视为外部定义的类。
例子:
<mx:Button label="Buy" fillColors="[0×99ff99,0×99ff99]">
<mx:click>
<mx:Script>
<![CDATA[
var e:BuyBookEvent = new BuyBookEvent();
e.bookData = data;
dispatchEvent(e);
]]>
</mx:Script>
</mx:click>
</mx:Button>
在本例中, click事件会创建一个自定事件, 然后从 itemRenderer 中冒出, 并由可视链中的较高组件(Button)接收。
三、类似完整的MXML组件:
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
分享到:
相关推荐
详细介绍Flex的项目呈现器的各种初级用法以及高级用法,相当实用。
flex itemRenderer 渲染机制的概念和使用
理解_Flex_itemRenderer 理解_Flex_itemRenderer 理解_Flex_itemRenderer
NULL 博文链接:https://hcty31.iteye.com/blog/1190932
关于flex的itemRenderer的介绍,还算比较详细。
解决Flex内联itemRenderer的例子
NULL 博文链接:https://liugang-ok.iteye.com/blog/1135551
NULL 博文链接:https://baiyejianxin.iteye.com/blog/823229
Flex项呈示器自定义及使用实例,展示用户信息,包括头像及等级信息。与博客Flex之旅--项呈示器ItemRenderer对应
通过两种方法继承List组件的IconItemRenderer,实现在每个item项中添加组件,如button等
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
用FLEX4做的项呈现器,仿雅虎聊天界面。 需要的字段为userId、nikeName、sex…… 你可以自行添加 声明,次呈现器只做模版使用。
flex中渲染器简介 本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。
itemRenderer里面的内容 获取技巧。
本文为大家详细介绍下Flex4如何使用itemRenderer 为Tree加线,感兴趣的朋友可以参考下
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
Flex 4 ColumnChart 图表使用实例ColumnChart_RIA前线-Flex富应用、Flex中文教程、Flex实例源码 Flex实现ColumnChart柱图为圆角矩形的itemRenderer - 代码分享 - 开源中国社区 flex 动态生成柱状图,折线图_IT空间_...
<![CDATA[ import mx.controls.CheckBox; import mx.controls.Alert; ... Alert.show("行的数据分别是:"+o.idx+"/"+o.... </mx:itemRenderer> </mx:DataGridColumn> </mx:WindowedApplication>
Flex 中如何根据不同行的内容, 动态调整每行的颜色。完整代码
基于flex的最牛的datagrid做的节目或者课程播表,用ml存储数据,连接到别的页面.