`
bence
  • 浏览: 30391 次
  • 性别: 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 
最终效果:


分享到:
评论

相关推荐

    Flex4_DataGrid_Tree_条目渲染器_源码

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

    理解_Flex_itemRenderer.pdf

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

    itemrenderer help

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

    Flex基础培训-3-组件和布局

    4. **基于列表的组件**:Flex提供了多种基于列表的组件,如List、Tree、Menu、TileList、HorizontalList等。这些组件用于以不同的视觉形式展示一组集合的数据。例如,List以垂直列的形式展示数据,而HorizontalList...

    flex中渲染器简介

    Flex 渲染器是Flex框架中的一个重要特性,主要用于在列表控件如List、DataGrid、Tree等中定制数据显示。在Flex中,渲染器允许开发者自定义列表中每一项的外观和行为,以此来提高用户体验和视觉吸引力。本系列将深入...

    带复选框的树状ComboBox

    接下来,添加复选框到每个树节点,我们可以创建自定义的List或DataGridItemRenderer,这个渲染器会包含一个CheckBox组件。当用户点击CheckBox时,需要更新数据模型以反映选择状态,同时可能还需要处理多选模式,例如...

Global site tag (gtag.js) - Google Analytics