I am having a problem where it is taking quite a long time to load a list with 100 entries. I am using a pregenerated arraycollection to pass to the data provider and a custom item renderer consists of nested containers. The moment I call this list.dataProvider = arraycollection;
, it sort of freezes for about 4 seconds then only the list appears.
Is there a workaround to address this problem?
The following is my code:
[Edit]
private function populateList():void
{
array = new Array();
for (var i:int =0;i<100;i++)
{
array.push({
dateLabel:"LIVE",
timeLabel:"06:05",
homeTeamLabel:"Liverpool",
homeScoreLabel:"1",
awayScoreLabel:"0",
awayTeamLabel:"Chelsea",
homeTeamHandicapLabel:"Liverpool",
homeHandicapLabel:"2/5",
awayTeamHandicapLabel:"Chelsea",
awayHandicapLabel:"",
priceHomeHandicapLabel:"1.950",
priceAwayHandicapLabel:"1.950"
});
}
trace("done loading");
testarr = new ArrayCollection(array);
liveList.dataProvider = testarr;
}
This is my list component:
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="off">
<s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0">
<s:List id="liveList" width="100%" itemRenderer="customItemRenderer" creationComplete="populateList()"
contentBackgroundColor="0xf0f0f0" useVirtualLayout="true" depth="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<s:layout>
<s:VerticalLayout gap="0" variableRowHeight="true" requestedMinRowCount="1" useVirtualLayout="true"/>
</s:layout>
</s:List>
</s:VGroup>
</s:Scroller>
It turns out that the performance is compromised when I wrap the list with the Scroller and VGroup. When I remove both of them, the list loads just fine.