flex中datagrid添加超链接
想要达到的效果如图中点击datagrid中第二列的任何一个值如“南京”、“杭州”就会触发一个事件，
http://dl.iteye.com/upload/attachment/609708/cae77eec-9c39-3aac-831a-31711fe78c1c.png
在datagrid中可使用 <mx:itemRenderer>
<fx:Component>
<mx:LinkButton />
</fx:Component>
</mx:itemRenderer>
但是 linkbutton所触发的事件如何才能调用到写在script中的方法呢。
使用outerDocument，就可以调用外部的函数，outerDocument 标识符将作用范围更改为查找文件或外部文档。
代码如下：
<?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:supportClasses="com.esri.ags.skins.supportClasses.*" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var consProjects:ArrayCollection=new ArrayCollection
([{name:'杭州',consOrgName:'中铁一局',projectStatus:'在建',tbOrgName:'建筑队4组',projectManager:'李建刚',projectCost:'3876M',buildingArea:'4000万平米'},
{name:'南京',consOrgName:'中铁四局',projectStatus:'在建',tbOrgName:'建筑队4组',projectManager:'李建刚',projectCost:'3876M',buildingArea:'4000万平米'},
]);
protected function init(event:FlexEvent = null):void
{
}
public function clickEvent(o:Object):void{
Alert.show(o.consOrgName);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%">
<s:HGroup width="100%" height="30">
</s:HGroup>
<mx:DataGrid width="100%" dataProvider="{consProjects}">
<mx:columns>
<mx:DataGridColumn headerText="序号" sortable="false" resizable="false" textAlign="center" editable="false" width="40"/>
<mx:DataGridColumn headerText="XXXX" dataField="name">
<mx:itemRenderer>
<fx:Component>
<mx:LinkButton label="{data.name}" color="red" textDecoration="none" click="outerDocument.clickEvent(data)"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="XXXX" dataField="consOrgName"/>
<mx:DataGridColumn headerText="XXXX" dataField="projectStatus"/>
<mx:DataGridColumn headerText="XXXX" dataField="tbOrgName"/>
<mx:DataGridColumn headerText="XXXX" dataField="projectManager"/>
<mx:DataGridColumn headerText="XXXX" dataField="projectCost"/>
<mx:DataGridColumn headerText="XXXX" dataField="buildingArea"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Group>
</s:Application>
