AdvancedDataGrid高级数据网格加入自定义链接按钮LinkButton

1. 写一个继承自LinkButton的子类XjhLinkButton，代码如下：

//XjhLinkButton.as

package org.xjh.components{
	import flash.events.MouseEvent;
	import mx.controls.LinkButton;

	/**
	 * 功能：重写LinkButton的状态颜色 
	 * 样式：
	 * color:字体颜色
	 * textDecoration:下线划（无：normal,有:underline）
	 * textRollOverColor:鼠标滑过时字的颜色
	 * textSelectedColor:鼠标按下时字的颜色，即被选中时的颜色
	 * 创建时间：2014-9-24 上午11:51:28
	 * 修改时间：
	 * 作者：xujianhua
	 */
	public class XjhLinkButton extends LinkButton{
		
		public function XjhLinkButton(){
			super();
			this.alpha = 1; //设置透明度为1，即完全显示状态 
			this.setStyle("color", "#0000FF"); //设置初始化字体颜色
		}
		
		//鼠标悬浮在字上
		override protected function rollOverHandler(event:MouseEvent):void{
			super.rollOverHandler(event);
			this.setStyle("textDecoration", "underline");//显示下划线
			this.setStyle('textRollOverColor', '#FF0000');//设置鼠标滑过时的字体颜色
		}
		
		//鼠标按下
		override protected function mouseDownHandler(event:MouseEvent):void{
			super.mouseDownHandler(event);
			this.setStyle('textDecoration', 'underline');
			this.setStyle('textRollOverColor', '#0000FF');
			this.setStyle('textSelectedColor', '#00000FF');//设置被选中时的字体颜色
		}
		
		//鼠标抬起
		override protected function mouseUpHandler(event:MouseEvent):void{
			super.mouseUpHandler(event);
			this.setStyle("color", "#BC11C2");//鼠标抬起后更改字体颜色，表示已经点击过
		}
		
		//鼠标移出
		override protected function rollOutHandler(event:MouseEvent):void{
			super.rollOutHandler(event);
			this.setStyle('textDecoration', 'normal');
			this.setStyle('textRollOverColor', '#0000FF');
		}
		
	}
}

2. 写一个含有AdvancedDataGrid的MXML应用AdvancedDataGridTest.mxml，代码如下：

<?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"
			   xmlns:xjh="org.xjh.components.*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			[Bindable]
			//定义一个水果数据源
			private var fruitList:ArrayCollection = new ArrayCollection(
				[
					{name:"苹果",count:"100",sprice:10,yprice:8},
					{name:"梨子",count:"200",sprice:11,yprice:10},
					{name:"葡萄",count:"300",sprice:6,yprice:4},
					{name:"香蕉",count:"400",sprice:9,yprice:8},
					{name:"桃子",count:"500",sprice:5,yprice:3},
					{name:"哈密瓜",count:"600",sprice:8,yprice:6},
					{name:"芒果",count:"360",sprice:7,yprice:9}
				]
			);
			
			public function addToShoppingCartBt_clickHandler(event:MouseEvent):void
			{
				Alert.show("这里可以做加入购物车的操作");
			}
		]]>
	</fx:Script>
	<!--Flex4与Flex3 定义布局的不同-->
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	<s:Panel title="水果价格一览表"
			 color="0x000000" 
			 borderAlpha="0.15"
			 width="600" >
		<!--定义AdvanceDataGrid组件并且设置相关属性和数据源-->
		<mx:AdvancedDataGrid id="fruitADG" 
							 width="100%" height="100%"
							 color="0X323232" 
							 dataProvider="{fruitList}" >
			<mx:groupedColumns>
				<mx:AdvancedDataGridColumn dataField="name" headerText="水果名字"/>
				<mx:AdvancedDataGridColumn dataField="count" headerText="数量" />
				<mx:AdvancedDataGridColumnGroup headerText="价格对比">
					<mx:AdvancedDataGridColumn dataField="sprice" headerText="市场价"/>
					<mx:AdvancedDataGridColumn dataField="yprice" headerText="优惠价格"/>
				</mx:AdvancedDataGridColumnGroup>
				<mx:AdvancedDataGridColumn headerText="操作">
					<mx:itemRenderer>
						<fx:Component>
							<xjh:XjhLinkButton label="加入购物车" 
							     click="outerDocument.addToShoppingCartBt_clickHandler(event)" />
						</fx:Component>
					</mx:itemRenderer>
				</mx:AdvancedDataGridColumn>
			</mx:groupedColumns>
		</mx:AdvancedDataGrid>
	</s:Panel>
</s:Application>

3. 测试