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

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

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


入口DataGridItemRenderer.mxml

Flex代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--                            -->  
3. <!-- @author:magicianzrh                    -->  
4. <!-- @weblog:http://www.actionscript3.cn/magicianzrh         -->  
5. <!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->  
6. <!--                            -->  
7. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
8.  <mx:Script>  
9.   <![CDATA[  
10.    import mx.controls.Alert;  
11.    import mx.collections.ArrayCollection;  
12.      
13.    private var demoData:Array = [ {"btnName":"name0","info":"info0"},  
14.                 {"btnName":"name1","info":"info1"}];  
15.    [Bindable]  
16.    private var dataAry:ArrayCollection = new ArrayCollection(demoData);  
17.      
18.    public function pushNewData(itemIndex:int):void {  
19.     if (itemIndex == 1){  
20.      Alert.show("itemIndex==1,add new data","tips");  
21.      var newData:Object = {"btnName":"name2","info":"info2"};  
22.      dataAry.addItem(newData);  
23.     }  
24.    }  
25.   ]]>  
26.  </mx:Script>  
27.  <mx:DataGrid x="0" y="0" dataProvider="{dataAry}">  
28.   <mx:columns>  
29.    <mx:DataGridColumn headerText="信息(info)" dataField="info"/>  
30.    <mx:DataGridColumn headerText="按钮(btn)" itemRenderer="org.magicianzrhLib.MyItemRenderer"/>  
31.   </mx:columns>  
32.  </mx:DataGrid>  
33. </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代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--                            -->  
3. <!-- @author:magicianzrh                    -->  
4. <!-- @weblog:http://www.actionscript3.cn/magicianzrh         -->  
5. <!-- @ignore:a sample show how to get itemrendeer index in DataGrid in flex -->  
6. <!--                            -->  
7. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="94" height="22">  
8.  <mx:Script>  
9.   <![CDATA[  
10.    import mx.core.Application;  
11.    import mx.controls.Alert;  
12.    import mx.collections.ArrayCollection;  
13.    import mx.controls.DataGrid;  
14.    private function clickHandler():void {  
15.     var itemIndex:int = ArrayCollection((owner as DataGrid).dataProvider).getItemIndex(data);  
16.     Alert.show(String(itemIndex),"itemIndex");  
17.    }  
18.   ]]>  
19.  </mx:Script>  
20.  <mx:Button id="btn" x="{(this.width-btn.width)/2}" y="0" label="{data.btnName}" click="clickHandler();"/>  
21. </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取消掉了，不过有时候还是需要的，我还是保留着这方面的