Flex DataGrid 动态改变headerRender 属性&itemRender 改变单元格颜色

很多时候会用到动态改变datagrid的headerRender 或者itemRender的属性值，也会有设置单元格的颜色的要求。

<?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" xmlns:render="com.render.*">
	<fx:Declarations>
		<fx:XMLList id="employees">
			<employee>
				<name>Christina Coenraets</name>
				<phone>555-219-2270</phone>
				<email>[e-mail]</email>
				<active>true</active>
				<credit>101</credit>
			</employee>
			<employee>
				<name>Joanne Wall</name>
				<phone>555-219-2012</phone>
				<email>[e-mail]</email>
				<active>true</active>
				<credit>80</credit>
			</employee>
			<employee>
				<name>Maurice Smith</name>
				<phone>555-219-2012</phone>
				<email>[e-mail]</email>
				<active>false</active>
				<credit>-110</credit>
			</employee>
			<employee>
				<name>Mary Jones</name>
				<phone>555-219-2000</phone>
				<email>[e-mail]</email>
				<active>true</active>
				<credit>0</credit>
			</employee>
		</fx:XMLList>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			public var testBaseValue:int;
			protected function outterHandler(event:MouseEvent):void
			{
				//内部的render可以直接改变外面的值来改变属性
				testBaseValue = 1;
				dg.dataProvider.refresh();
			}
			
			protected function innerAndOutterHandler(event:MouseEvent):void
			{
				(header1.headerRenderer as ClassFactory).properties = {'baseValue':1};// 不管内部还是外部的render都可以通过此方法动态赋值
				header1.headerRenderer = header1.headerRenderer;
				dg.dataProvider.refresh();
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="Inner Outter Change properties" click="innerAndOutterHandler(event)"/>
	<s:Button label="Outter Change properties" click="outterHandler(event)"/>
	<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
		<mx:columns>
			<mx:DataGridColumn dataField="name" headerText="Name" id="header1" 
							   headerRenderer="com.render.CustomHeadRender"/>
			<mx:DataGridColumn dataField="phone">
				<mx:headerRenderer>
					<!--这个是内部render-->
					<fx:Component>
						<render:CustomHeadRender>
							<fx:Script>
								<![CDATA[
									override public function validateProperties():void
									{
										super.validateProperties();
										//用outerDocument来访问外部的属性和方法
										if(outerDocument.testBaseValue == 1)
										{
											this.text = "CustomHeader2";
										}
										else
										{
											this.text = "DefaultHeader2";
										}
									}
								]]>
							</fx:Script>
						</render:CustomHeadRender>
					</fx:Component>
				</mx:headerRenderer>
			</mx:DataGridColumn>
			<mx:DataGridColumn dataField="credit" headerText="Credit" itemRenderer="com.render.CustomItemRender"/>
		</mx:columns>
	</mx:DataGrid>
</s:Application>

 CustomHeadRender.as

package com.render
{
	import mx.controls.dataGridClasses.DataGridItemRenderer;
	/*这个是外部render*/
	public class CustomHeadRender extends DataGridItemRenderer
	{
		private var _baseValue:int;
		public function set baseValue(value:int):void
		{
			_baseValue = value;
		}
		
		public function get baseValue():int
		{
			return this._baseValue;
		}
		
		override public function validateProperties():void
		{
			super.validateProperties();
			if(baseValue == 1)
			{
				this.text = "CustomHeader1";
			}
			else
			{
				this.text = "DefaultHeader1";
			}
		}
		
	}
}

 CustomItemRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						  xmlns:s="library://ns.adobe.com/flex/spark" 
						  xmlns:mx="library://ns.adobe.com/flex/mx" 
						  focusEnabled="true" autoDrawBackground="{autoDrawBackGroup}" alternatingItemColors="{color}">
	<fx:Script>
		<![CDATA[
			// 更改单元格背景色和字体颜色
			import mx.controls.listClasses.BaseListData;
			[Bindable]private var color:uint;
			[Bindable]private var autoDrawBackGroup:Boolean;
			override public function set listData(value:BaseListData):void
			{
				super.listData = value;
				if(!isNaN(Number(listData.label)))
				{
					if(Number(listData.label) > 100)
					{
						color = 0xff0000;
					}
					else if(Number(listData.label) > 0)
					{
						color = 0x00ff00;
					}
					else
					{
						color = 0xffffff;
					}
					autoDrawBackGroup = color != 0xffffff;
				}
			}
		]]>
	</fx:Script>
	<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" color="{0xffffff - color}"/>
</s:MXDataGridItemRenderer>