解决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);
}
}
}