Affichage d'une colonne de case à cocher dans un DataGrid Flex

Question

J'essaie de créer un DataGrid Flex personnalisé composé de deux colonnes, une pour l'étiquette et l'autre pour une case à cocher. La case à cocher est contenue dans une classe appelée CustomRenderer qui hérite de GridItemRenderer et implémente IFactory.

Dans chaque instance de CustomRenderer, j'ai une variable appelée numéro de sorte que quand une case est cochée, elle peut renvoyer le numéro pour que je sache quelle ligne a été cliquée.

Le problème est que mon CustomRenderer ne s'affiche pas lorsque le programme s'exécute.

S'il vous plaît quelqu'un pourrait-il aider.

Voici mon code.

MyProgram.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" minWidth="955" minHeight="600" 
       initialize="initData()"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.controls.Alert; 
      import mx.controls.CheckBox; 
      import mx.rpc.events.AbstractEvent; 

      private var ArrayItems:Array = [ 
       {Label:'Table'}, 
       {Label:'Chair'}, 
       {Label:'Stool'}, 
       {Label:'Bench'}, 
       {Label:'Sofa'}]; 

      [Bindable] 
      private var ArrayCollectionItems:ArrayCollection; 

      private var t:CustomRenderer; 

      public function initData():void 
      { 
       ArrayCollectionItems=new ArrayCollection(ArrayItems); 

       t = new CustomRenderer(); 
       t.cb.addEventListener(MouseEvent.CLICK, HandleClick); 
       MainGrid.columns[1].itemRenderer = t.newInstance();  
      } 

      public function HandleClick(event:Event):void 
      { 
       var c:CustomRenderer = (event.currentTarget) as CustomRenderer 
       var RowClicked:int = c.number; 
      }  

     ]]> 
    </fx:Script> 
    <s:states> 
     <s:State name="State1"/> 
    </s:states> 

    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <s:Panel x="99" y="14" width="379" height="268" skinClass="spark.skins.spark.PanelSkin"> 
     <s:DataGrid id="MainGrid" x="19" y="17" width="340" height="199" 
        dataProvider="{ArrayCollectionItems}" requestedRowCount="4" requireSelection="false" 
        resizableColumns="false" selectionMode="singleRow" showDataTips="false"> 
      <s:columns> 
       <s:ArrayList> 
        <s:GridColumn minWidth="200" dataField="Label" headerText="Label"></s:GridColumn> 
        <s:GridColumn minWidth="30" dataField="" headerText="">     
        </s:GridColumn> 
       </s:ArrayList> 
      </s:columns> 
      <s:typicalItem> 
       <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object> 
      </s:typicalItem> 
     </s:DataGrid> 
    </s:Panel> 
</s:Application> 

CustomRenderer.as

import mx.controls.Alert; 
import mx.controls.CheckBox; 
import mx.core.IFactory; 

import spark.components.gridClasses.GridItemRenderer; 

public class CustomRenderer extends GridItemRenderer implements IFactory 
{ 
    private static var count:int = 0; 
    public var number:int; 
    public var cb:CheckBox; 

    public function CustomRenderer() 
    {  
     cb = new CheckBox(); 
     number = count++; 
     cb.x = 22; 
     cb.y = 4;   
     addElement(cb); 
    } 

    public function newInstance():* 
    { 
     return new CustomRenderer(); 
    } 
} 

Answer 1

Probablement c'est parce que vous passez une instance de la itemRenderer à la colonne (nouvelle CustomRenderer()) au lieu d'une classe (CustomRenderer) . L'approche commune est de passer la classe itemRenderer à votre colonne, puis gérer les clics/sélection à l'intérieur de celui-ci:

<s:GridColumn minWidth="30" headerText="" itemRenderer="com.yourpackage.CustomRenderer"> 

Il suffit de commencer à taper « CustomRenderer » lorsque vous attribuez et vous devriez être en mesure de saisie semi-automatique il écrit sur votre chemin complet du paquet.

Ensuite, vous interceptez les événements de sélection de case à cocher à l'intérieur du rendu et vous pouvez définir certaines propriétés de données personnalisées (par exemple, data.selected). Si vous avez vraiment besoin de faire quelque chose en dehors de votre grille après la sélection, vous devrez peut-être déclencher un événement personnalisé de votre moteur de rendu lors de la sélection et l'écouter sur votre grille de données.