Flex4 TIleLayout 在width 100% 下出現的奇怪的row

<?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">
<fx:Script>
<![CDATA[ 
protected function addItem(event:MouseEvent):void
{ 
var item:Button = new Button();
item.label = String(testContainer.numElements);
item.width = 50;
item.height = 50;
testContainer.addElement(item); 
} 

protected function clearAll(event:MouseEvent):void
{ 
testContainer.removeAllElements(); 
}

protected function clearLastItem(event:MouseEvent):void
{
if(testContainer.numElements > 0)
{
testContainer.removeElementAt(testContainer.numElements - 1); 
} 
} 
]]>
</fx:Script>
<s:controlBarContent>
<s:Button click="addItem(event)" label="add item"/>
<s:Button click="clearLastItem(event)" label="clear last "/>
<s:Button click="clearAll(event)" label="clearAll"/>
</s:controlBarContent>


<s:SkinnableContainer id="testContainer" 
backgroundColor="0xcccccc" 
alpha="0.8" 
width="100%" 
>

<s:layout> 
<s:TileLayout id="tileLayout" 
clipAndEnableScrolling="true" 
paddingLeft="5"
paddingRight="5"
orientation="rows" 
/> 
</s:layout> 
</s:SkinnableContainer> 
</s:Application>

一個解決的方式是繼承TileLayout並override updateDisplayList 如下:

override public function updateDisplayList(unscaledWidth:Number , unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth , unscaledHeight);
   (target as GroupBase).explicitHeight = Math.ceil(rowCount * (rowHeight + verticalGap) - verticalGap);
  }

詳細內容請參考:http://forums.adobe.com/thread/565055