DataGrid中的labelFunction 作用是确定此列中显示文本的函数。默认情况下,列显示与列名称匹配的数据字段的文本。不过,有时您希望显示基于多个数据字段的文本,或显示不具备自己想要格式的文本。在这种情况下,可使用 labelFunction 指定一个回调函数。
对于 DataGrid 控件,方法签名具有以下格式:
labelFunction(item:Object, column:DataGridColumn):String
其中,item 包含 DataGrid 项目对象,并且 column 指定 DataGrid 列。
此属性可用作数据绑定的源代码。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<s:XMLListCollection id="eList" >
<fx:XMLList>
<employee>
<name>刘德华</name>
<phone>555-219-2270</phone>
<email>liudehua@qq.com</email>
</employee>
<employee>
<name>张曼玉</name>
<phone>555-219-2012</phone>
<email>zhangmanyu@qq.com</email>
</employee>
<employee>
<name>郭富城</name>
<phone>555-219-2012</phone>
<email>guofucheng@qq.com</email>
</employee>
<employee>
<name>赵薇</name>
<phone>555-219-2000</phone>
<email>zhaowei@qq.com</email>
</employee>
</fx:XMLList>
</s:XMLListCollection>
</fx:Declarations>
<fx:Script>
<!--[CDATA[
public function getEnglishName(item:Object, column:DataGridColumn):String
{
return item.email.split("@")[0];
}
]]-->
</fx:Script>
<mx:DataGrid x="243" y="209" dataProvider="{eList}">
<mx:columns>
<mx:DataGridColumn headerText="中文名" dataField="name"/>
<mx:DataGridColumn headerText="英文名" labelFunction="getEnglishName"/>
<mx:DataGridColumn headerText="电话号" dataField="phone"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
这里只是简单的将邮件中的中文名 显示出来
当然 也可以做更复杂的应用
from http://blog.csdn.net/winnershili/archive/2011/01/19/6152151.aspx
分享到:
相关推荐
在提供的"Test.mxml"文件中,可能包含了对上述知识点的实例应用,你可以通过查看和运行这个文件来更深入地理解如何在实际项目中使用Flex4的选择树组件。通过对代码的分析和调试,你将能更好地掌握Tree组件的各种特性...
在Flex4中,我们可以利用Spark图表组件来实现这样的功能。 1. **Spark图表组件**:Flex4引入了Spark图表组件,相比先前的MX图表,Spark图表提供了更丰富的样式和更好的性能。主要的类包括`LineChart`,它可以绘制...
1. **LabelField**:DataGrid中的每个单元格默认显示的是数据源中的简单文本,但有时我们可能需要自定义显示内容,这时可以使用LabelField或LabelFunction来实现。 2. **ButtonColumn**:如果需要在DataGrid中添加...
"flex tree的简单使用"这个主题将引导我们了解如何在Flex应用程序中有效地利用Tree组件来展示和操作树状数据。 首先,我们要知道Tree组件是Adobe Flex SDK中的一个控件,它允许用户以节点和子节点的形式查看数据。...
每个扇区代表数据源中的一个条目,通过PieSeries类设置数据系列,调整sliceWidth表示每个扇区的大小,使用labelFunction可以自定义每个扇区的标签内容。 区域图则强调了数据的范围和区间,通常用于展示连续性数据的...
总结起来,Flex 4中的`DataGrid`通过结合`DateFormatter`和自定义的`labelFunction`可以方便地实现日期格式的转换,使数据显示更加人性化。理解并熟练运用这些技巧,可以提升用户体验,增强应用程序的易用性。
在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...
例如,在DataGridColumn中使用`labelFunction`属性指定一个函数,该函数负责接收数据项并返回格式化后的字符串。 ```xml 电话号码" labelFunction="formatPhoneNumber" /> ``` 下面是一个具体的`formatPhoneNumber...
在Flex开发中,Tree组件是用于展示层次结构数据的关键元素,它可以用来呈现文件系统、组织结构等具有层级关系的信息。这篇博客文章“Flex中tree实现的种种细节”深入探讨了如何在Flex应用中有效地利用Tree组件,以及...
在Adobe Flex框架中,`ColumnChart`组件是用于可视化数据的一种常见方式,它能够清晰地展示数据之间的比较。本文将详细解析如何通过Flex中的`ColumnChart`组件来实现当图表获得焦点时改变颜色的功能,这一功能可以...
接下来,我们需要在DataGrid中使用这个自定义的ItemRenderer。可以在`DataGridColumn`中指定`itemRenderer`属性: ```xml 价格" dataField="@price" itemRenderer="DataGridColumnFontItemRender" /> ``` ...
在Flex中,可以使用`CategoryAxis`类来创建轴,并设置其`labelFunction`属性来自定义标签。图例可以通过`Legend`组件来创建,通过`dataProvider`属性关联到图表。 在`RadarChartTest`这个文件中,很可能包含了实现...
另外,如果你使用的是Spark DataGrid(Flex 4.x),则可以使用`flexibility`属性来控制列宽的弹性。`flexibility`值越大,列在剩余空间分配中的权重越高。 最后,对于复杂的布局需求,可能还需要结合使用`...
在Flash中使用ContainerMovieClip创建Flex容器 21.3节.导入FlashCS3的组件 21.4节.认识Cairngorm小型结构 21.5节.创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务代理类 21.7节.创建...
4. **labelFunction**: 自定义标签函数`mylabel`,用于格式化时间轴上的每个标签,使其显示为更友好的日期时间格式。 ### 动态数据更新机制 为了实现实时动态曲线图,案例中采用了一个定时器(`Timer`类)和一个...
根据提供的信息,我们可以总结出以下关于Flex学习笔记中的关键技术知识点: ### 1. Flex 基础设置 在Flex开发中,通常会涉及到基础样式的设置。例如,在给定的部分内容中提到了字体大小、颜色及背景色的设置。虽然...
一个非常不错的flex时间控件 ()}" labelFunction="selectDateTime" width="150"/> public function selectDateTime(item:Date):String { return item.fullYear + "-" + item.month + "-" + item.dateUTC + ...
### Flex常用UI组件详解 #### 一、DataGrid 组件 **DataGrid** 是 Flex 中一个非常重要的组件,主要...以上是 Flex 中 DataGrid 和 List 组件的基本使用及扩展功能介绍,希望能帮助大家更好地理解和使用这些组件。
**知识点19:使用Adobe Flash Catalyst设置Flex应用程序外观** - **工具介绍**: Adobe Flash Catalyst是一种设计工具,用于创建Flex应用程序的用户界面而无需编写代码。 - **外观设计**: 提供直观的设计界面,可以...