Itemrenderer dans Datagrid mauvais affichage

Question

J'ai une grille de données avec un composant itemrenderer. Dans l'itemrenderer est un bouton qui devrait être affiché dans chaque deuxième ligne de la grille de données. Il apparaît de cette façon après la compilation.

Dès que je fais défiler la grille de données, les boutons sont mal affichés, pourquoi?

Link to image

<fx:Script> 
    <![CDATA[ 
    import mx.collections.ArrayCollection; 
    import mx.events.FlexEvent; 

    [Bindable] 
    private var _ac:ArrayCollection = new ArrayCollection(); 

    private function applicationComplete(e:FlexEvent):void{ 
     for (var i:Number = 0; i < 100; i++) { 
      var b:Boolean = (i % 2) ? true : false; 
      _ac.addItem({text:'foo' + i, showBtn:b}); 
     } 
    } 

    ]]> 
</fx:Script> 

<mx:DataGrid id="datagrid" dataProvider="{_ac}" width="200"> 
    <mx:columns> 
     <mx:DataGridColumn headerText="Text" dataField="text" /> 
     <mx:DataGridColumn headerText="Edit" > 
      <mx:itemRenderer> 
       <fx:Component> 
        <mx:Canvas> 
         <fx:Script> 
          <![CDATA[ 
          override public function set data(value:Object):void { 
           super.data = value; 
           if(value != null){ 
            if (data.showBtn == false) editBtn.visible = false; 
           } 
          } 
          ]]> 
         </fx:Script> 
         <s:Button id="editBtn" label="edit" /> 
        </mx:Canvas> 
       </fx:Component> 
      </mx:itemRenderer> 
     </mx:DataGridColumn> 
    </mx:columns> 

</mx:DataGrid> 

Answer 1

Parce que le moteur de rendu est réutilisée sur le défilement, vous devez le remettre en mode visible.

changement

if (data.showBtn == false) editBtn.visible = false; 

à

if (data.showBtn == false){ 
    editBtn.visible = false; 
}else{ 
    editBtn.visible = true; 
} 

Ou simplement utiliser cette syntaxe:

editBtn.visible = (data.showBtn as Boolean);