`
bence
  • 浏览: 29756 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用ItemRenderer处理基于List容器的显示内容 [DataGrid, Tree, List等]

 
阅读更多
转载于:http://liguoliang.com/2009/01/678/

具体的情况如:使用labelFunction处理DataGrid显示内容 , 只是这里使用的是ItemRender来实现并实现更多功能.

如Student中有一Gender_属性, 1表示男生, 2表示女生, 3表示未知, 现在有下要求:

1. 在DataGrid中不可以显示1, 2,3, 应显示 男女 [ 该功能可由LabelFunction实现],

2. 如果为男生,, 则”男生”颜色为红色, 女生颜色为默认, 未知字体大小为10号

具体实现:

view plaincopy to clipboardprint?
var columnGender:DataGridColumn = new DataGridColumn(); 
columnGender.headerText = "Gender"; 
columnGender.dataField = "Gender_"; //使用ItemRender 
columnGender.itemRenderer =  new ClassFactory(Gender_Label); 
//columnGender.labelFunction = formatGender; 
 
_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender]; 
ItemRender实现: 该类将继承List, 重写其UpdateDisplayList函数, 如下:

view plaincopy to clipboardprint?
package com.test.itemRender 

import mx.controls.Label; 
import mx.controls.listClasses.ListBase; 
 
public class Gender_Label extends Label 

    /**
     * 构造函数
     */ 
    public function Gender_Label() { 
        super(); 
    } 
 
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
        super.updateDisplayList(unscaledWidth, unscaledHeight); 
        if(data.Gender_ == 1) { 
             setStyle('fontSize',14); 
             setStyle('fontWeight', 'bold'); 
             setStyle('color', 0xDD0000); 
             this.text = "男生"; 
         }else if(data.Gender_ == 2) { 
            setStyle('fontSize',14); 
            this.text = "女生" 
         } 
         //otherwise, return the label to its regular state 
         else { 
             setStyle('fontSize', 10); 
             this.text = "未知"; 
         } 
    } 
 
}// end of class 
}// end of package 
最终效果:


分享到:
评论

相关推荐

    Flex itemRenderer的详细教程

    在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ItemRenderer,我们可以实现更加灵活和动态的界面设计。 #### 二、...

    Flex4_DataGrid_Tree_条目渲染器_源码

    在"Flex4_DataGrid_Tree_条目渲染器_源码"这个资源中,"My05_01_小老虎_List_Tree"可能包含了关于如何使用和自定义这两个组件的示例代码。你可以从中学习到如何创建和配置DataGrid和Tree,以及如何定义和应用自定义...

    DataGrid的itemRenderer and HeaderRenderer

    在本话题中,我们将深入探讨如何使用`checkbox`和`combobox`作为`DataGrid`的`itemRenderer`和`headerRenderer`,以及实现全选、多选等功能。 首先,`itemRenderer`是`DataGrid`中用于自定义每一行数据项显示方式的...

    理解_Flex_itemRenderer.pdf

    默认情况下,Flex组件(如List, DataGrid, Tree等)会将数据显示为简单的文本。但是,通过使用itemRenderer,开发者可以自定义每个数据项的显示方式,使其展示更加丰富多彩,并且可以根据实际需要设计出更加直观、...

    flex itemRenderer 渲染机制的概念和使用

    itemRenderer通常与List、DataGrid等数据绑定组件一起使用,通过设置其`itemRenderer`属性来指定自定义的渲染器类。 ### 二、itemRenderer的使用 1. **创建itemRenderer组件** 要创建一个itemRenderer,首先需要...

    Flex手机项目自定义List的ItemRenderer

    在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...

    FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc

    总结起来,这个例子展示了如何在Flex4中动态生成`DataGrid`,处理动态数据结构,以及通过客户化`itemRenderer`优化特定数据类型的显示。开发者可以灵活地根据后端返回的数据结构生成相应的UI,同时提供更人性化的...

    itemrenderer help

    当列表控件(如List、DataGrid等)需要显示数据时,它会根据数据项的数量动态创建相应的ItemRenderer实例,并将数据绑定到这些实例上。每个ItemRenderer实例负责显示一个数据项的信息。 **3. ItemRenderer与数据...

    flex as actionscript datagrid 背景色 flash itemRenderer script iframe overrider 跳转到别的页面

    在描述中提到的"flash itemRenderer"可能是指在DataGrid中嵌入Flash内容,例如播放器,以增强用户体验。 6. **IFrame overrider**: 这可能是指在ItemRenderer中使用IFrame元素来加载外部网页内容。IFrame可以作为一...

    内渲染器_ItemRenderer

    在基于Adobe Flex的项目中,它允许开发者根据需要为数据列表(如List或DataGrid)的每个项提供定制的视觉表现。这个概念在UI设计中十分常见,因为它可以提升用户体验并使界面更具吸引力。 标题“内渲染器_...

    flex4做的itemrenderer呈现器

    在主应用中,你需要告诉List或DataGrid使用`friendItem`作为其ItemRenderer。这可以通过在数据列或listItemRenderer属性中设置完成: ```actionscript <s:List dataProvider="{myDataProvider}"> <s:...

    Flex中itemRenderer的使用简介

    在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义MX或者Spark列表类(如List、DataGrid等)中的数据项显示方式。ItemRenderer使得开发者能够以更个性化的方式展示数据,提升用户界面的视觉效果和...

    在flex的dataGrid控件中显示图片的实践

    本文将深入探讨如何在DataGrid中显示图片,特别是在与Spring、Hibernate和Struts等框架集成的背景下,如何处理二进制数据并将其在Flex前端呈现。 首先,让我们了解Flex的基本概念。Flex是一个基于ActionScript和...

    使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作

    首先,ItemRenderer是一个接口,它允许开发者定义数据在DataGrid中显示的方式。实现IDataRenderer接口的类能够渲染数据项,例如Button、TextArea等。实现IDropInListItemRenderer接口的类能够接收一个ListData对象,...

    flex itemRenderer深入学习--flex相册例子

    在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义数据项在列表或网格等容器中的显示方式。本篇文章将深入探讨如何利用ItemRenderer实现一个灵活且功能丰富的相册示例,同时也会涉及Flex中的一些...

    flex datagrid中实现显示序列号

    当我们需要在DataGrid中显示序列号时,通常会利用`itemRenderer`功能来实现。`itemRenderer`是Flex提供的一种自定义数据显示的方式,允许我们对每个单元格的数据进行定制化处理。在本篇文章中,我们将深入探讨如何在...

    datagrid行的背景色

    在开发基于Adobe Flex的用户界面时,Datagrid控件是一个常用的数据展示组件,它允许我们以表格形式展示数据。在实际应用中,我们经常需要根据特定条件或者需求自定义Datagrid的行背景色,以增强视觉效果,或者突出...

    Flex动态创建DataGrid设置图片

    在Flex开发中,DataGrid控件是用于展示数据集的常用组件,它可以显示多行多列的数据,并且具有丰富的自定义功能。本教程主要聚焦于如何在Flex中动态创建DataGrid,并向其中添加图片,这在创建交互式、富媒体应用时...

    flex 映射DataGrid,修改DataGridColumn显示值

    在Flex中,我们可以通过多种方式来定制DataGrid中的DataGridColumn的显示内容,例如更改显示的文本或者根据不同的条件显示不同的符号等。下面我们将详细探讨如何实现这些功能。 ### 1. 自定义DataGridColumn显示...

    Flex4 使用itemRenderer 为Tree加线具体实现

    itemRenderer是一个自定义组件,可以在Tree控件中使用,以自定义渲染其节点元素。本文将详细介绍如何在Flex4中通过itemRenderer为Tree组件添加线条,使得树形结构更加清晰易于理解。 在Flex4中,可以使用MXML或...

Global site tag (gtag.js) - Google Analytics