程序博客网 > mac os cdr镜像下载

Flex的itemRenderer属性使用例子

来源：互联网 发布：mac os cdr镜像下载 编辑：程序博客网 时间：2024/05/22 03:35

1、新建一个应用文件dataGridTest.mxml，这是主文件

 java代码

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
  3.     initialize="init()" width="600" height="600">   
  4.        
  5.     <mx:Script>   
  6.         <![CDATA[   
  7.             import com.test.StatusIFactory;   
  8.             import com.test.CellColorIFactory;   
  9.             import mx.rpc.events.ResultEvent;   
  10.             import mx.controls.Alert;   
  11.                
  12.             //定义渲染器   
  13.             private var itemRender:IFactory = new CellColorIFactory(cellColor);   
  14.             private var itemRenderImg:IFactory = new StatusIFactory();   
  15.                
  16.             private var dataXml:XML;   
  17.                
  18.             private function init():void {   
  19.                 dataXmlService.url = "students.xml";//可改成具体请求方式   
  20.                 try{   
  21.                     dataXmlService.send();   
  22.                 }catch(e:IOError){   
  23.                     Alert.show("请求出错");   
  24.                 }   
  25.             }   
  26.                
  27.             private function dataXmlToData(evt:ResultEvent):void{   
  28.                 dataXml = XML(evt.result);   
  29.                 dataGrid.dataProvider = dataXml.children();   
  30.                 //使用渲染，使行列显示不同的颜色   
  31.                 dataGrid.itemRenderer = itemRender;   
  32.                    
  33.                 grid.dataProvider = dataXml.children();   
  34.                 //使用渲染，增加显示图片和状态文字   
  35.                 column.itemRenderer = itemRenderImg;   
  36.             }   
  37.                
  38.             //定义渲染器中用到的回调函数   
  39.             private function cellColor(dataField:String,data:XML):uint{   
  40.                 //设置前两页显示颜色   
  41.                 if((dataField=="col1" || dataField=="col2") && "2107"!=data.@col1.toString()){   
  42.                     return 0x03f066;   
  43.                 }   
  44.                 //设置第八行显示颜色   
  45.                 if("2107"==data.@col1.toString()){   
  46.                     return 0x0000FF;   
  47.                 }   
  48.                 //设置默认显示颜色   
  49.                 return 0x000000;   
  50.             }   
  51.         ]]>   
  52.     </mx:Script>   
  53.        
  54.     <mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)" />   
  55.        
  56.     <mx:DataGrid id="dataGrid" x="26" y="10" width="543" height="270" fontSize="12" textAlign="center">   
  57.         <mx:columns>   
  58.             <mx:DataGridColumn headerText="学号" dataField="@col1"/>   
  59.             <mx:DataGridColumn headerText="姓名" dataField="@col2"/>   
  60.             <mx:DataGridColumn headerText="年龄" dataField="@col3"/>   
  61.             <mx:DataGridColumn headerText="爱好" dataField="@col4"/>   
  62.             <mx:DataGridColumn headerText="住址" dataField="@col5"/>   
  63.         </mx:columns>   
  64.     </mx:DataGrid>   
  65.     <mx:DataGrid id="grid" x="26" y="288" width="543" height="302" fontSize="12" textAlign="center">   
  66.         <mx:columns>   
  67.             <mx:DataGridColumn headerText="学号" dataField="@col1" textAlign="left" id="column"/>   
  68.             <mx:DataGridColumn headerText="姓名" dataField="@col2"/>   
  69.             <mx:DataGridColumn headerText="年龄" dataField="@col3"/>   
  70.             <mx:DataGridColumn headerText="爱好" dataField="@col4"/>   
  71.             <mx:DataGridColumn headerText="住址" dataField="@col5"/>   
  72.         </mx:columns>   
  73.     </mx:DataGrid>   
  74.        
  75. </mx:Application>  

2、新建CellColorIFactory.as和CellColorItemRenderer.as文件，这里是通过实现IFactory接口的方式实现，CellColorItemRenderer继承了DataGridItemRenderer，覆写了set data方法，用来设置文本的显示颜色。

Java代码 复制代码
  1. package com.test   
  2. {   
  3.     import mx.core.IFactory;   
  4.        
  5.     //必须要实现IFactory接口   
  6.     public class CellColorIFactory implements IFactory   
  7.     {   
  8.         //回调方法   
  9.         private var _cellColorFunction:Function ;   
  10.            
  11.         public function CellColorIFactory(f:Function){   
  12.             super();   
  13.             this._cellColorFunction = f;   
  14.         }   
  15.            
  16.         public function newInstance():*{   
  17.             //实例化渲染器，实现具体功能   
  18.             return new CellColorItemRenderer(_cellColorFunction);   
  19.         }   
  20.     }   
  21. }  


 

Java代码 复制代码
  1. package com.test   
  2. {   
  3.     import mx.controls.dataGridClasses.DataGridItemRenderer;   
  4.     import mx.controls.dataGridClasses.DataGridListData;   
  5.   
  6.     public class CellColorItemRenderer extends DataGridItemRenderer   
  7.     {   
  8.         //传递回调函数   
  9.         private var _cellColorFunction:Function ;   
  10.         public function CellColorItemRenderer(f:Function)   
  11.         {   
  12.             super();   
  13.             this._cellColorFunction = f;   
  14.         }   
  15.         override public function set data(value:Object):void  
  16.         {   
  17.             if(value != null)   
  18.             {   
  19.                 var data:XML = XML(value);   
  20.                 super.data = value;   
  21.                 //调用父类的public function get listData():BaseListData   
  22.                 var dataField:String = DataGridListData(listData).dataField;   
  23.                 while(dataField.indexOf("@")!=-1)    
  24.                     dataField = dataField.replace("@","");   
  25.                 //改变颜色；两个参数，dataField表示数据列（名称），data表示一行数据   
  26.                 setStyle("color", this._cellColorFunction.call(this,dataField,data));   
  27.             }   
  28.         }   
  29.     }   
  30. }  


3、新建StatusIFactory.as和statusItemRenderer.mxml文件，同样是用到了IFactory接口，statusItemRenderer组件重新定义了现实样式，包括添加状态图片和文本。小图片放在工程根目录下的resources文件夹中。

Java代码 复制代码
  1. package com.test   
  2. {   
  3.     import mx.core.IFactory;   
  4.        
  5.     //必须要实现IFactory接口   
  6.     public class StatusIFactory implements IFactory   
  7.     {   
  8.         public function StatusIFactory(){   
  9.             super();   
  10.         }   
  11.            
  12.         public function newInstance():*{   
  13.             //实例化渲染器，实现具体功能   
  14.             return new statusItemRenderer();   
  15.         }   
  16.     }   
  17. }  


 

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%"    
  3.      horizontalAlign="center">   
  4.     <mx:Script>    
  5.     <![CDATA[   
  6.            
  7.         [Embed(source="../resources/you.png")]   
  8.         private static const you:Class;   
  9.         [Embed(source="../resources/liang.png")]   
  10.         private static const liang:Class;   
  11.         [Embed(source="../resources/hao.png")]   
  12.         private static const hao:Class;   
  13.         [Embed(source="../resources/cha.png")]   
  14.         private static const cha:Class;   
  15.            
  16.         private function getImage(data:Object):Object {   
  17.             if(data==null) return null;   
  18.             if("2101"==data.@col1){return you;}   
  19.             if("2102"==data.@col1){return liang;}   
  20.             if("2103"==data.@col1){return cha;}   
  21.             return hao;   
  22.         }   
  23.            
  24.         private function getText(data:Object):String {   
  25.             if(data==null) return null;   
  26.             if("2101"==data.@col1){return "优";}   
  27.             if("2102"==data.@col1){return "良";}   
  28.             if("2103"==data.@col1){return "差";}   
  29.             return "好";   
  30.         }   
  31.     ]]>    
  32.     </mx:Script>    
  33.     <mx:Label id="serial" text="{this.data.@col1}"/>   
  34.     <mx:Image id="stateImage" source="{getImage(this.data)}"/>   
  35.     <mx:Label id="stateText" text="{getText(this.data)}"/>   
  36. </mx:HBox>  



4、例子中用到了
private var itemRender:IFactory = new CellColorIFactory(cellColor);
private var itemRenderImg:IFactory = new StatusIFactory();
的方式定义一个itemRenderer，然后通过引用变量名称；也可以直接在组件中以属性的方式引用（要保证引用的文件路径正确）
<mx:DataGridColumn headerText="学号" dataField="@col1" itemRenderer="statusItemRenderer" textAlign="left" id="column"/>
5、例子的students.xml数据和效果。

Java代码 复制代码
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <datas>   
  3. <data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京"  />   
  4. <data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京"  />   
  5. <data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京"  />   
  6. <data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京"  />   
  7. <data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京"  />   
  8. <data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京"  />   
  9. <data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京"  />   
  10. <data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京"  />   
  11. <data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京"  />   
  12. <data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京"  />   
  13. </datas>  


 

 

mac os cdr镜像下载 mac os cdr镜像下载
原创粉丝点击
热门IT博客
淘宝违规产品被删除了淘宝违规产品被删除了
天香捏脸数据怎么导入天香捏脸数据怎么导入
建筑项目管理系统源码
oracle手动创建数据库
苏打饼干 知乎
淘宝关联账户能开店吗
nginx 限制ip访问目录
抓取客户端数据工具
交管12123一直网络失败
money for mac 破解版
淘宝网韩版针织开衫
如何制作精美ppt 知乎
手机怎样在淘宝买东西
品牌零食 知乎
机房迁移网络方案
网络可连接但无法上网
hbase清空表数据
清洁面膜 知乎
苏联解体 征兆 知乎
mac好用的图片编辑软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 灰锅数控 广州数控 数控铣 数控是什么 数控系统 数控代码 华东数控 数控车 数控英才网 数控g代码 数控镗床 数控是啥 数控论坛网 数控维修 数控图片 数控招聘 什么是数控 数控设备 数控机械 数控设备厂 数控公司 星辉数控 数控程序员 数控水刀 数控立钻 数控箍筋机 数控开料 数控中心架 数控精雕 数控工厂 学数控学校 电脑数控 学数控编程 数控等离子 数控车床编程100例图 数控技术专业 龙门数控切割机 2018数控师傅月薪一般多少 数控车床新手入门教程 数控车床编程 数控技术应用

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里