解决Flex的DataGrid控件中ItemRender随Scrollbar的滚动发生UI重绘问题

今天上午做一个复杂的DataGrid,其中几列是用ItemRender动态绘制按钮，遇到一个问题：DataGrid的第一行和最后一行的UI显示会随着DataGrid的Scollbar移动，而数据都正常。估计是Scollbar移动引起UI重绘，调试了好久也没解决。下午偶然间发现属性liveScrolling，试了一下搞定！

<mx:DataGrid
      left="3" right="3"
      alternatingItemColors="#FFFFFF"
      textRollOverColor="#6E6E70"
      rollOverColor="#F0F3F9"
      height="738"
      rowHeight="80"
      wordWrap="true"     
      headerHeight="0"
      top="144"
      id="dgTeam"
      fontWeight="bold"
      horizontalGridLines="true"
      borderThickness="0"
      color="#B3B4B7"
      variableRowHeight="true"
      paddingTop="8"
      paddingBottom="8"
      sortableColumns="true" dataProvider="{mockTeamData}" horizontalSeparatorSkin="{DashLine}"  verticalGridLineColor="#9e9fa3"    liveScrolling="false">
  
   <mx:columns>
    <mx:DataGridColumn headerText="Team Members"
           width="140"
           fontSize="12" dataField="name">
     <mx:itemRenderer>
      <mx:Component>
       <mx:Canvas creationComplete="init()">

        <mx:Script>
         <![CDATA[
          import mx.controls.Label;
          private var l:Label;
          private function init():void
          {
           l=new Label();
           l.x=10;
           l.text=data.name;
           l.addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
           l.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);                        
           this.addChild(l);
          }
          
          private function onMouseOver(event:MouseEvent):void
          {
           l.setStyle("textDecoration","underline");
           l.setStyle("color","0x6E6E70");
          }
          private function onMouseOut(event:MouseEvent):void
          {
           l.setStyle("textDecoration","none");
           l.setStyle("color","0xB3B4B7");
          }
          
         ]]>
        </mx:Script>
       </mx:Canvas>
      </mx:Component>
     </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Not Started"
           id="status1"
           resizable="true"
        
           width="220"
           fontSize="9"
           color="#838487">
     <mx:itemRenderer>
      <mx:Component>
       <mx:Canvas creationComplete="{TeamColumnFormatter.InitRender(data.status1,data.name,this);}" >

        <mx:Script>
         <![CDATA[
          import mx.controls.Alert;
          
          import com.view.Team.TeamColumnFormatter;
    
         ]]>
        </mx:Script>
       </mx:Canvas>
      </mx:Component>
     </mx:itemRenderer>

    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="In Progress"
        
           width="220"
           fontSize="9"
           color="#838487">
     <mx:itemRenderer>
      <mx:Component>
       <mx:Canvas creationComplete="TeamColumnFormatter.InitRender(data.status2,data.name,this);">
        <mx:Script>
         <![CDATA[
          import com.view.Team.TeamColumnFormatter;
         ]]>
        </mx:Script>
       </mx:Canvas>
      </mx:Component>
     </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Submitted"
         
           width="220"
           fontSize="9"
           color="#838487">
     <mx:itemRenderer>
      <mx:Component>
       <mx:Canvas creationComplete="TeamColumnFormatter.InitRender(data.status3,data.name,this)">
        <mx:Script>
         <![CDATA[
          import com.view.Team.TeamColumnFormatter;
         ]]>
        </mx:Script>
       </mx:Canvas>
      </mx:Component>
     </mx:itemRenderer>

    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Complete"
        
           width="220"
           fontSize="9"
           color="#838487">
     <mx:itemRenderer>
      <mx:Component>
       <mx:Canvas creationComplete="TeamColumnFormatter.InitRender(data.status4,data.name,this)">
        <mx:Script>
         <![CDATA[
          import com.view.Team.TeamColumnFormatter;
         ]]>
        </mx:Script>
       </mx:Canvas>
      </mx:Component>
     </mx:itemRenderer>

    </mx:DataGridColumn>

   </mx:columns>
  </mx:DataGrid>

TeamColumnFormatter.as：

package com.view.Team
{
 public class TeamColumnFormatter
 {
  import mx.controls.Alert;
  import com.view.Team.ColumnSquareButton;
  import flash.events.MouseEvent;

  public static function InitRender(customData:Object,nameData:Object, target:Object):void
  {
   var _x:uint=8;
   for (var i:uint=0; i < customData.length; i++)
   {
    var btn:ColumnSquareButton=new ColumnSquareButton();

    if (i < 6)
    {
     btn.x=_x;
     _x+=36;
    }
    else
    {
     if (i % 6 == 0)
     {
      _x=8;
     }

     btn.x=_x;
     _x+=36;
     btn.y=36 * Math.floor(i / 6);
    }

    btn.Label=customData[i].toString();
    btn.Name=nameData.toString();
    btn.addEventListener(MouseEvent.CLICK, onclick);
    target.addChild(btn);

   }
  }

  public static function onclick(event:MouseEvent):void
  {
   Alert.show("Redirect to "+event.currentTarget.Name + "'s assigned page:" + event.currentTarget.Label);
  }
 }
}