itemRenderer渲染器在Flex应用中是相当重要的,它能够丰富List等容器的样式,将默认为label的<mx:List>中能够加入<mx:Image/><mx:But同/>等标签。
如下图所示:
这样<mx:List/>显示的内容更加丰富了。
那么如何操作渲染器中的元素们呢?例如点击上图中的“删除”(图片),将本条item删除。
尅通过在<mx:itemRenderer/>中的<mx:Image/>标签上添加事件来完成,
例如:
<mx:Image source="image/del.png" click="this.parentDocument.showMe(event)"/>
这样就可以到用到外部的showMe()方法了。
如果想通过这个<mx:Image/>标签传递值可以用一下方法
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="image/stop.png")]
private var stop:Class;
[Bindable]
[Embed(source="image/play.png")]
private var play:Class;
private function showMe(event:MouseEvent):void{
Alert.show((event.currentTarget as Image).data.toString());
}
]]>
<mx:XML id="tempXML">
<root>
<name>sdfaasdfadfd</name>
</root>
<root>
<name>oooooooo</name>
</root>
</mx:XML>
<mx:List dataPrivoder="{tempXML.root}">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{this.parentDocument.stop}"
data="{data.name}"
click="this.parentDocument.showMe(event)"/>
</mx:Component>
</mx:ItemRenderer>
</mx:List>
注意: <mx:Image/>标签中是通过data="{data.name}"来存储值的
路径source="{this.parentDocument.stop}"通过this.parentDocument来调用外部绑定的图片。
点击事件 click同理。
下附代码:
- 大小: 35.5 KB
分享到:
相关推荐
理解_Flex_itemRenderer 理解_Flex_itemRenderer 理解_Flex_itemRenderer
详细介绍Flex的项目呈现器的各种初级用法以及高级用法,相当实用。
关于flex的itemRenderer的介绍,还算比较详细。
解决Flex内联itemRenderer的例子
flex itemRenderer 渲染机制的概念和使用
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
通过两种方法继承List组件的IconItemRenderer,实现在每个item项中添加组件,如button等
flex中渲染器简介 本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。
Flex项呈示器自定义及使用实例,展示用户信息,包括头像及等级信息。与博客Flex之旅--项呈示器ItemRenderer对应
用FLEX4做的项呈现器,仿雅虎聊天界面。 需要的字段为userId、nikeName、sex…… 你可以自行添加 声明,次呈现器只做模版使用。
NULL 博文链接:https://hcty31.iteye.com/blog/1190932
itemRenderer里面的内容 获取技巧。
本文为大家详细介绍下Flex4如何使用itemRenderer 为Tree加线,感兴趣的朋友可以参考下
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
NULL 博文链接:https://liugang-ok.iteye.com/blog/1135551
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存储数据,连接到别的页面.