[flexcomponents] Scenario Numebr 2: scaling DG

[lytvynyuk]

When Application starts, sizes of DGs is set.
After cycle Collapse->Expand, all sizes are messed up.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
<mx:Script>
     <![CDATA[
         function coll():void{
             this.currentState="state1";
         }

         function exp():void{
             this.currentState="";
         }
     ]]>
</mx:Script>
     <mx:HBox width="100%" height="100%">
         <mx:VBox width="50%" height="100%">
             <mx:DataGrid width="100%" height="100%" id="dg1">
                 <mx:columns>
                     <mx:DataGridColumn dataField="Field 1" width="60"/>
                     <mx:DataGridColumn dataField="Field 2"/>
                     <mx:DataGridColumn dataField="Field 3" width="120"/>
                 </mx:columns>
             </mx:DataGrid>
         </mx:VBox>
         <mx:VBox width="50%" height="100%">
             <mx:DataGrid width="100%" height="100%" id="dg2">
                 <mx:columns>
                     <mx:DataGridColumn dataField="Field 1" width="60"/>
                     <mx:DataGridColumn dataField="Field 2"/>
                     <mx:DataGridColumn dataField="Field 3" width="120"/>
                 </mx:columns>
             </mx:DataGrid>
         </mx:VBox>
     </mx:HBox>
     <mx:states>
         <mx:State name="state1">
         </mx:State>
     </mx:states>
     <mx:Button label="Collapse" bottom="10" left="10" click="coll()" />
     <mx:Button label="Expand" bottom="10" left="100" click="exp()"/>
     <mx:transitions>
         <mx:Transition fromState="" toState="state1">
             <mx:Parallel>
                 <mx:AnimateProperty target="{dg1}" fromValue="100"
toValue="0" property="percentWidth"/>
                 <mx:AnimateProperty target="{dg2}" fromValue="100"
toValue="0" property="percentWidth"/>
             </mx:Parallel>
         </mx:Transition>
         <mx:Transition fromState="state1" toState="">
             <mx:Parallel>
                 <mx:AnimateProperty target="{dg1}" fromValue="0"
toValue="100" property="percentWidth"/>
                 <mx:AnimateProperty target="{dg2}" fromValue="0"
toValue="100" property="percentWidth"/>
             </mx:Parallel>
         </mx:Transition>
     </mx:transitions>
</mx:Application>