Flex的itemRenderer属性使用例子

flex的部分组件有itemRenderer属性，这是个非常有用的属性，通过它同一个组件可以创建出各式漂亮的外观来。下面通过做一个例子展示其效果，例子展示的效果包括对栅格控制颜色显示，增加图片和文本。
1、新建一个应用文件dataGridTest.mxml，这是主文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	initialize="init()" width="600" height="600">
	
	<mx:Script>
		<![CDATA[
			import com.test.StatusIFactory;
			import com.test.CellColorIFactory;
			import mx.rpc.events.ResultEvent;
			import mx.controls.Alert;
			
			//定义渲染器
			private var itemRender:IFactory = new CellColorIFactory(cellColor);
			private var itemRenderImg:IFactory = new StatusIFactory();
			
			private var dataXml:XML;
			
			private function init():void {
				dataXmlService.url = "students.xml";//可改成具体请求方式
				try{
					dataXmlService.send();
				}catch(e:IOError){
					Alert.show("请求出错");
				}
			}
			
			private function dataXmlToData(evt:ResultEvent):void{
				dataXml = XML(evt.result);
				dataGrid.dataProvider = dataXml.children();
				//使用渲染，使行列显示不同的颜色
				dataGrid.itemRenderer = itemRender;
				
				grid.dataProvider = dataXml.children();
				//使用渲染，增加显示图片和状态文字
				column.itemRenderer = itemRenderImg;
			}
			
			//定义渲染器中用到的回调函数
			private function cellColor(dataField:String,data:XML):uint{
				//设置前两页显示颜色
				if((dataField=="col1" || dataField=="col2") && "2107"!=[e-mail]()){
					return 0x03f066;
				}
				//设置第八行显示颜色
				if("2107"==[e-mail]()){
					return 0x0000FF;
				}
				//设置默认显示颜色
				return 0x000000;
			}
		]]>
	</mx:Script>
	
	<mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)" />
	
	<mx:DataGrid id="dataGrid" x="26" y="10" width="543" height="270" fontSize="12" textAlign="center">
		<mx:columns>
			<mx:DataGridColumn headerText="学号" dataField="@col1"/>
			<mx:DataGridColumn headerText="姓名" dataField="@col2"/>
			<mx:DataGridColumn headerText="年龄" dataField="@col3"/>
			<mx:DataGridColumn headerText="爱好" dataField="@col4"/>
			<mx:DataGridColumn headerText="住址" dataField="@col5"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:DataGrid id="grid" x="26" y="288" width="543" height="302" fontSize="12" textAlign="center">
		<mx:columns>
			<mx:DataGridColumn headerText="学号" dataField="@col1" textAlign="left" id="column"/>
			<mx:DataGridColumn headerText="姓名" dataField="@col2"/>
			<mx:DataGridColumn headerText="年龄" dataField="@col3"/>
			<mx:DataGridColumn headerText="爱好" dataField="@col4"/>
			<mx:DataGridColumn headerText="住址" dataField="@col5"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

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

package com.test
{
	import mx.core.IFactory;
	
	//必须要实现IFactory接口
	public class CellColorIFactory implements IFactory
	{
		//回调方法
		private var _cellColorFunction:Function ;
		
		public function CellColorIFactory(f:Function){
			super();
			this._cellColorFunction = f;
		}
		
		public function newInstance():*{
			//实例化渲染器，实现具体功能
	       	return new CellColorItemRenderer(_cellColorFunction);
		}
	}
}

	package com.test
	{
		import mx.controls.dataGridClasses.DataGridItemRenderer;
		import mx.controls.dataGridClasses.DataGridListData;
	
		public class CellColorItemRenderer extends DataGridItemRenderer
		{
			//传递回调函数
			private var _cellColorFunction:Function ;
			public function CellColorItemRenderer(f:Function)
			{
				super();
				this._cellColorFunction = f;
			}
			override public function set data(value:Object):void
			{
				if(value != null)
				{
					var data:XML = XML(value);
					super.data = value;
					//调用父类的public function get listData():BaseListData
					var dataField:String = DataGridListData(listData).dataField;
					while(dataField.indexOf("@")!=-1) 
						dataField = dataField.replace("@","");
					//改变颜色；两个参数，dataField表示数据列（名称），data表示一行数据
					setStyle("color", this._cellColorFunction.call(this,dataField,data));
				}
			}
		}
	}

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

package com.test
{
	import mx.core.IFactory;
	
	//必须要实现IFactory接口
	public class StatusIFactory implements IFactory
	{
		public function StatusIFactory(){
			super();
		}
		
		public function newInstance():*{
			//实例化渲染器，实现具体功能
	       	return new statusItemRenderer();
		}
	}
}

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%" 
	 horizontalAlign="center">
	<mx:Script> 
	<![CDATA[
		
        [Embed(source="../resources/you.png")]
		private static const you:Class;
		[Embed(source="../resources/liang.png")]
		private static const liang:Class;
		[Embed(source="../resources/hao.png")]
		private static const hao:Class;
		[Embed(source="../resources/cha.png")]
		private static const cha:Class;
		
		private function getImage(data:Object):Object {
			if(data==null) return null;
			if("2101"==data.@col1){return you;}
			if("2102"==data.@col1){return liang;}
			if("2103"==data.@col1){return cha;}
			return hao;
		}
		
		private function getText(data:Object):String {
			if(data==null) return null;
			if("2101"==data.@col1){return "优";}
			if("2102"==data.@col1){return "良";}
			if("2103"==data.@col1){return "差";}
			return "好";
		}
	]]> 
	</mx:Script> 
	<mx:Label id="serial" text="{this.data.@col1}"/>
	<mx:Image id="stateImage" source="{getImage(this.data)}"/>
	<mx:Label id="stateText" text="{getText(this.data)}"/>
</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数据和效果。

<?xml version="1.0" encoding="UTF-8"?>
<datas>
<data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京"  />
<data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京"  />
<data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京"  />
<data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京"  />
<data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京"  />
<data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京"  />
<data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京"  />
<data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京"  />
<data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京"  />
<data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京"  />
</datas>

6、不同的业务需求要求不同的处理效果，就要写符合要求的组件。这里关键是要掌握felx类库对该属性提供的支持，继承或实现什么借口，或者覆写什么方法能达到效果，其默认的传递数据格式等。

评论

1 楼 mfdefs 2010-04-06  

谢谢太好了