如何在flex中的datagrid itemrenderer中选择特定的复选框？

Question

我有按钮像随机点击，如果我点击这个按钮，然后将选择15 databox中的复选框itemrenderer复选框但我不能访问复选框？请参考我？如何访问复选框？

<mx:DataGridColumn headerText="1" rendererIsEditor="true" editorDataField="selected"> 
    <mx:itemRenderer> 
<mx:Component> 
<mx:CheckBox textAlign="center" click="{data.check1 = (data.check1 != 'true') ? 'true' : 'false'};outerDocument.toggleCheckbox(data);outerDocument.calcValues();" dataChange="this.selected=outerDocument.validateCheckbox(data)" themeColor="#ffff00" fillAlphas="[1, 1, 0.75, 0.65]" fillColors="[#f7f7d3, #ffffff, #ff9900, #ffff00]" /> 
    </mx:Component> 
    </mx:itemRenderer> 
    </mx:DataGridColumn> 

Answer 1

看看这个代码：
Data.as

package 
{ 
    public class Data 
    { 
     [Bindable] 
     public var name:String; 

     [Bindable] 
     public var checked:Boolean; 
     public function Data(name:String, checked:Boolean) 
     { 
      this.name = name; 
      this.checked = checked; 
     } 
    } 
} 

Test.mxml

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
    xmlns:local="*" creationComplete="create();"> 
    <mx:Button label="Randomize" click="randomize()"/> 
    <mx:Button label="Trace selected indices" click="traceValues()"/> 
    <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" 
     dataProvider="{dp}"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="name" headerText="Name"/> 
      <mx:DataGridColumn headerText="Checked" dataField="checked"> 
       <mx:itemRenderer> 
       <mx:Component> 
        <mx:CheckBox selected="{data.checked}" 
        change="{data.checked = this.selected;}/> 
       </mx:Component> 
       </mx:itemRenderer> 
      </mx:DataGridColumn> 
     </mx:columns> 
    </mx:DataGrid> 
    <mx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      [Bindable] 
      public var dp:ArrayCollection; 
      public function create():void 
      { 
       var array:Array = []; 
       for(var i:Number = 0; i < 20; i++) 
        array.push(new Data("The Name", false)); 
       dp = new ArrayCollection(array); 
      } 
      private function randomize():void 
      { 
       var selectedNumbers:Array = []; 
       var randomNumber:Number; 
       for(var i:Number = 0; i < 5; i++) 
       { 
       do 
        randomNumber = Math.floor(Math.random() * 20); 
       while(selectedNumbers.indexOf(randomNumber) != -1); 
       dp.getItemAt(randomNumber).checked = !dp.getItemAt(randomNumber).checked; 
       selectedNumbers.push(randomNumber); 
       } 
      } 
      private function traceValues():void 
      { 
       for(var i:Number = 0; i < 20; i++) 
       { 
       if(dp.getItemAt(i).checked) 
        trace(i); 
       } 
      } 
     ]]> 
    </mx:Script> 
</mx:Application> 

Answer 2

从复选框的更改事件处理程序调用outerDocument.someMethod(this)。这样，​​可以访问该复选框。

如果您将代码分解为不同的行，而不是将所有内容隐藏在最右端，读取代码会更容易。

UPDATE：

<!-- this is your DataGridColumn's itemRenderer --> 
<mx:itemRenderer> 
    <mx:Component> 
    <mx:CheckBox textAlign="center" selected="{data.checked}"/> 
    <mx:Component> 
<mx:itemRenderer> 

此加入随机按钮的点击处理：

var selectedNumbers:Array = []; 
var randomNumber:Number; 
for(i = 0; i < 15; i++) 
{ 
    do 
    randomNumber = Math.floor(Math.random() * 40); 
    while(selectedNumbers.indexOf(randomNumber) != -1); 
    //dp is the data provider of the data grid 
    dp.getItemAt(randomNumber).checked = true; 
    selectedNumbers.push(randomNumber); 
}