a tip for Flexbox of Flexlib–How to re-layout the children when the width of FlowBox is set to 100%

July 17th, 2008

Ntt.cc

System-Box-Empty The width of FlowBox will be the sum of its children’s width, if the width of FlowBox is set to 100%. So FlowBox will never re-layout the children.

It’s simple to solve this problem, just bind the width of FlowBox to the width of its parent or other fixed number.

Full code after the jump(Download full project here).

Download: PureApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
creationComplete="initApp()"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function initApp():void
{
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" id="parentPanel" title="BitsReader sample" layout="absolute">
<mx:Label text="width = parentPanel.width" />
<local:FlowBox borderStyle="solid" borderThickness="1" width="{parentPanel.width}" height="150" horizontalScrollPolicy="off" x="0" y="19">
<mx:HBox horizontalGap="1" >
<mx:Text text="label1" fontSize="10"/>
<mx:Text text="0000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label2" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label13" fontSize="10"/>
<mx:Text text="00000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label4" fontSize="10"/>
<mx:Text text="0000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label5" fontSize="10"/>
<mx:Text text="000000000000000000000000000" fontSize="10"/>
</mx:HBox>
</local:FlowBox>
<mx:Label text="width = 100%" x="0" y="143"/>
<local:FlowBox borderStyle="solid" borderThickness="1" width="100%" horizontalScrollPolicy="off" x="0" y="169">
<mx:HBox horizontalGap="1" >
<mx:Text text="label1" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label2" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label13" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label4" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
<mx:HBox horizontalGap="1">
<mx:Text text="label5" fontSize="10"/>
<mx:Text text="0000000000000000000000000000000" fontSize="10"/>
</mx:HBox>
</local:FlowBox>
</mx:Panel>
</mx:Application>