Loading ...
Sorry, an error occurred while loading the content.

AnimateProperty | s:group | does not work

Expand Messages
  • 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
    Message 1 of 1 , Jul 11, 2013
    • 0 Attachment
      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
    Your message has been successfully submitted and would be delivered to recipients shortly.