0 Replies Latest reply on Jan 13, 2014 8:13 AM by KentWood2012

    Flex 4 bug:inherited propery cause transition bug

    KentWood2012

      i try to make some foldable groups, like an accordion component

      i create a Base.as class and extends from Group,code like this

       

       

          package

          {

                import flash.events.MouseEvent;

                import spark.components.Group;

                public class Base extends Group

                {

                          public var header:Group;

                          public var body:Group;

                          public function Base()

                          {

                                    super();

                          }

                          override protected function initializationComplete():void

                          {

                                    super.initializationComplete();

                                    if(header)

                                    {

                                              header.addEventListener(MouseEvent.CLICK,changeState);

                                    }

                          }

                          protected function changeState(event:MouseEvent):void

                          {

                                    if(currentState=="fold")

                                              currentState="unfold";

                                    else

                                              currentState="fold";

                          }

                }

          }

      and i defined two properties,header and body here,but i don't instantiate here,and then i worte a mxml component "FoldUnit.mxml" that extends "Base" and i will instantiate header and body in it,code like this

        

       

       

          <?xml version="1.0" encoding="utf-8"?>

          <local:Base xmlns:fx="http://ns.adobe.com/mxml/2009"

                                    xmlns:s="library://ns.adobe.com/flex/spark" currentState="fold" clipAndEnableScrolling="true"

                                    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="200" >

                <local:states>

                          <s:State name="fold" />

                          <s:State name="unfold" />

                </local:states>

                <local:transitions>

                          <s:Transition toState="fold">

                                    <s:Sequence>

                                              <s:Resize target="{this}" duration="400" />

                                              <s:RemoveAction target="{body}" />

                                    </s:Sequence>

                          </s:Transition>

                          <s:Transition toState="unfold">

                                              <s:Resize target="{this}" duration="400" />

                          </s:Transition>

                </local:transitions>

                <s:Group id="header" width="100%">

                          <s:Rect height="40" width="100%">

                                    <s:fill>

                                              <s:SolidColor color="0xff0000" />

                                    </s:fill>

                          </s:Rect>

                </s:Group>

                <s:Group id="body" includeIn="unfold" y="40" width="100%">

                          <s:Rect height="200" width="100%">

                                    <s:fill>

                                              <s:SolidColor color="0x00ff00" />

                                    </s:fill>

                          </s:Rect>

                </s:Group>

          </local:Base>

       

       

      after all,i placed three of FoldUnit in main application to simulate an accordion component.

       

       

          <?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" xmlns:local="*">

                <s:Group>

                          <s:layout>

                                    <s:VerticalLayout variableRowHeight="true" />

                          </s:layout>

                          <local:FoldUnit />

                          <local:FoldUnit />

                          <local:FoldUnit />

                </s:Group>

          </s:Application>

       

       

      everything like fine,however,if i try to click one red header to fold up,that green body just disappear immediately,looks like that RemoveAction tag is useless.

       

       

      so,as i try to figure out why,i made things simple first,and i combine that function in Base.as into FoldUnit.mxml,then it works fine.

       

       

      so,i wonder is there a bug or something?

      PS:i don't wanna use a skinable component,coz' the size measure process always delayed,it's hard to location the scroll position in scroll bar.