对于一个DataGrid的DataGridColumn ItemRenderer，如何在操作Item

对于一个DataGrid的DataGridColumn ItemRenderer，如何在操作ItemRenderer后获取当前Column的Index值，比如假设这个ItemRenderer是一个Button，点一下要知道Index该咋办捏

上次我做的一个上传FileReferenceList Upload Files Sample处理过之类的问题，现在单独提取出来，其实就是利用ItemRenderer的data，之后在DataGrid的dataprovider中查找下

入口DataGridItemRenderer.mxml

Flex代码

<?xml version="1.0" encoding="utf-8"?>

<!-- -->

<!-- @author:magicianzrh -->

<!-- @weblog:http://www.actionscript3.cn/magicianzrh -->

<!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->

<!-- -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.collections.ArrayCollection;

private var demoData:Array = [ {"btnName":"name0","info":"info0"},

{"btnName":"name1","info":"info1"}];

[Bindable]

private var dataAry:ArrayCollection = new ArrayCollection(demoData);

public function pushNewData(itemIndex:int):void {

if (itemIndex == 1){

Alert.show("itemIndex==1,add new data","tips");

var newData:Object = {"btnName":"name2","info":"info2"};

dataAry.addItem(newData);

}

}

]]>

</mx:Script>

<mx:DataGrid x="0" y="0" dataProvider="{dataAry}">

<mx:columns>

<mx:DataGridColumn headerText="信息(info)" dataField="info"/>

<mx:DataGridColumn headerText="按钮(btn)" itemRenderer="org.magicianzrhLib.MyItemRenderer"/>

</mx:columns>

</mx:DataGrid>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!--                            -->
<!-- @author:magicianzrh                    -->
<!-- @weblog:http://www.actionscript3.cn/magicianzrh         -->
<!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->
<!--                            -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

private var demoData:Array = [ {"btnName":"name0","info":"info0"},
{"btnName":"name1","info":"info1"}];
[Bindable]
private var dataAry:ArrayCollection = new ArrayCollection(demoData);

public function pushNewData(itemIndex:int):void {
if (itemIndex == 1){
Alert.show("itemIndex==1,add new data","tips");
var newData:Object = {"btnName":"name2","info":"info2"};
dataAry.addItem(newData);
}
}
]]>
</mx:Script>
<mx:DataGrid x="0" y="0" dataProvider="{dataAry}">
<mx:columns>
<mx:DataGridColumn headerText="信息(info)" dataField="info"/>
<mx:DataGridColumn headerText="按钮(btn)" itemRenderer="org.magicianzrhLib.MyItemRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

org.magicianzrhLib下的MyItemRenderer.mxml

Flex代码

<?xml version="1.0" encoding="utf-8"?>

<!-- -->

<!-- @author:magicianzrh -->

<!-- @weblog:http://www.actionscript3.cn/magicianzrh -->

<!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->

<!-- -->

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="94" height="22">

<mx:Script>

<![CDATA[

import mx.core.Application;

import mx.controls.Alert;

import mx.collections.ArrayCollection;

import mx.controls.DataGrid;

private function clickHandler():void {

var itemIndex:int = ArrayCollection((owner as DataGrid).dataProvider).getItemIndex(data);

Alert.show(String(itemIndex),"itemIndex");

}

]]>

</mx:Script>

<mx:Button id="btn" x="{(this.width-btn.width)/2}" y="0" label="{data.btnName}" click="clickHandler();"/>

</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<!--                            -->
<!-- @author:magicianzrh                    -->
<!-- @weblog:http://www.actionscript3.cn/magicianzrh         -->
<!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->
<!--                            -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="94" height="22">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
private function clickHandler():void {
var itemIndex:int = ArrayCollection((owner as DataGrid).dataProvider).getItemIndex(data);
Alert.show(String(itemIndex),"itemIndex");
}
]]>
</mx:Script>
<mx:Button id="btn" x="{(this.width-btn.width)/2}" y="0" label="{data.btnName}" click="clickHandler();"/>
</mx:Canvas>

希望通过点击DataGrid中的Button可以获取相应Button所在行的index，DataGrid的 本身自带了蛮多的事件，对于这个问题有相关的事件是对鼠标事件的侦听，获取鼠标焦点看似不错的方法，不过你可以尝试下，对于这个问题，这种办法并不好

对于一个Flex Component，有两个属性可能大家平时会忽略掉，一个是owner指向当前Flex Component的容器，一个是data，就是对Flex Component的设值，这里就利用这两个来获取相应的index

在MyItemRenderer的clickHandler()处理中，我们首先要获取到DataGrid的dataProvider，从
DataGridItemRenderer中我们可以看到，DataGrid的dataProvider是一个ArrayCollection，当然上面
已经清晰的定义了整个ArrayCollection的结构

MyItemRenderer的data指向就ArrayCollection[i]（i为当前行index）

var itemIndex:int = ArrayCollection((owner as DataGrid).dataProvider).getItemIndex(data);

我在DataGridItemRenderer中写了一个public function pushNewData(itemIndex:int):void {}，如果作为一种逻辑：我需要点击一个特定的行中的按钮让DataGrid数据改变，应该怎么去做。

最简便的办法就是:

((owner as DataGrid).owner as DataGridItemRenderer).pushNewData(itemIndex);

或者(Application.application as DataGridItemRenderer).pushNewData(itemIndex);

第一个你必须把握好DataGridItemRenderer的结构；第二个就是Application的特殊点，必须是程序入口类

我们可以用一个字典来把相应的类引用跟相应的字符存储起来，通过dictionary[identifyString] 来获取类引用来调用

而如果是Cairngorm框架，那我们就不能这么写了，按Cairngorm设计，数据操作应该在Command中，如果需要跟后台交互，那
Command需要调用一个Delegate来完成跟后台的交互，Delegate完成出错处理以及相应的后台数据格式转化，之后回调Command修改
ModelLocator中的数据，通过绑定来达到使前台显示相应改变的效果

因为最新版本的Cairngorm以及把ViewLocator和ViewHelper取消掉了，不过有时候还是需要的，我还是保留着这方面的