AnimateProperty | s:group | does not work

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

AnimateProperty | s:group | does not work

ilikeflex
Hi

I am using the animate property for doing collapsing of spark group.
It works fine when increasing the height from 0 to 156 but does not work other way around. The animate does not play when height is decreased from 156 to 0.

Any body faced this problem??

I have put the sample code.

<?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"
                           creationComplete="application1_creationCompleteHandler(event)"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        import mx.controls.Alert;
                        import mx.effects.AnimateProperty;
                        import mx.events.FlexEvent;
                       
                        [Bindable]
                        public var detail:ArrayCollection = new ArrayCollection([
                                {ytd:"100",metricName:"test",nintyDayAvg:"890"}
                        ]);
                       
                       
                        private var containerChildAnimation:AnimateProperty;
                       
                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                        {
                                containerChildAnimation = new AnimateProperty(testGroup);
                                containerChildAnimation.duration = 500;
                                containerChildAnimation.property = "height";
                        }
                       
                        private var open:Boolean;
                        protected function button1_clickHandler(event:MouseEvent):void
                        {
                                if(open)
                                {
                                        containerChildAnimation.fromValue = 156;
                                        containerChildAnimation.toValue = 0;
                                        containerChildAnimation.play();
                                }
                                else
                                {
                                        containerChildAnimation.fromValue = 0;
                                        containerChildAnimation.toValue = 156;
                                        containerChildAnimation.play();
                                       
                                }
                                open  = !open;
                        }
                       
                        protected function button2_clickHandler(event:MouseEvent):void
                        {
                                Alert.show('Heigth ' + testGroup.height);
                        }
                       
                ]]>
        </fx:Script>
       
        <s:layout>
                <s:VerticalLayout/>
        </s:layout>
       
        <s:Button label="click me" click="button1_clickHandler(event)"/>
       
        <s:VGroup width="100%" id="testGroup" height="0">
               
                <s:HGroup width="100%">
                        <s:Spacer width="20%"/>
                        <s:Label fontSize="10" text="YTD"/>
                        <s:Spacer width="6%"/>
                        <s:Label fontSize="10" text="Previous YTD"/>
                        <s:Spacer width="7%"/>
                        <s:Label fontSize="10" text="YOY %"/>
                        <s:Spacer width="5%"/>
                        <s:Label fontSize="10" text="30 Days Avg"/>
                        <s:Spacer width="4%"/>
                        <s:Label fontSize="10" text="90 Days Avg"/>
                        <s:Spacer width="7%"/>
                        <s:Label fontSize="10" text="Trend"/>
                </s:HGroup>
               
                <mx:AdvancedDataGrid width="100%" dataProvider="{detail}"
                                                         focusEnabled="false" selectable="false" headerHeight="0"
                                                         showHeaders="false" sortableColumns="false" useRollOver="false"
                                                         verticalScrollPolicy="off">
                        <mx:columns>
                               
                       
                                <mx:AdvancedDataGridColumn dataField="metricName" headerText="" textAlign="left" width=".14"/>
                                <mx:AdvancedDataGridColumn dataField="ytd" headerText="YTD" headerWordWrap="true"
                                                                                   textAlign="center" width=".14"/>
                                <mx:AdvancedDataGridColumn dataField="previousYtd" headerText="Previous YTD"
                                                                                   headerWordWrap="true" textAlign="center" width=".14"/>
                                <mx:AdvancedDataGridColumn dataField="thirtyDayAvg" headerText="Prior 1 Month"
                                                                                   headerWordWrap="true" textAlign="center" width=".14"/>
                                <mx:AdvancedDataGridColumn dataField="nintyDayAvg" headerText="Prior 6 Month"
                                                                                   headerWordWrap="true" textAlign="center" width=".14"/>
                                <mx:AdvancedDataGridColumn dataField="previousYtd" headerText="Prior 1 Year"
                                                                                   headerWordWrap="true" textAlign="center" width=".14"/>
                                <mx:AdvancedDataGridColumn id="trendCol" headerText="Trend" width=".14"/>
                               
                        </mx:columns>
                </mx:AdvancedDataGrid>
               
        </s:VGroup>
</s:Application>

Thanks
ilikeflex