3 Replies Latest reply on Jul 12, 2007 5:19 AM by JKohn99

    Flex components layering

    SaltedIceCream
      When I create a new Flex component using Actionscript the component always appears on top of exisitng components.

      ex:

      var newPanel:Panel = new Panel();
      newPanel.width=300;
      newPanel.height=300;
      newPanel.x=40;
      newPanel.y=40;
      this.addChild(newPanel);

      If I do this 2 times I'll see the second one on top of the first.

      I'm trying to figure out a way to have newly created components display behind the older ones.

      I'm also curious on how to bring a component to the top or send it to the back.

      Thanks!
        • 1. Flex components layering
          drofnasnhoj
          I'm still fairly new to Flex, but one thing that I've noticed is that the order that the fields are displayed in your application determine which item is on top of the other.

          <mx:Application>
          ---<mx:Panel>the earlier the item was created, the lower it exists</mx:Panel>
          ---<mx:Panel>second element</mx:Panel>
          ---<mx:Panel> top element </mx:Panel>
          </mx:Application>

          So it's almost like it goes by the age of the field, when ever you add a new field it adds it after all of the other child elements.

          I personally haven't found a way to dynamically (thru ActionScript) set a element higher or lower then the other.
          • 2. Re: Flex components layering
            Mitek17 Level 1
            Hi SaltedIceCream,

            Every time you use addChild() method it adds the component to the end of the components lists. And Flex displays last objects on top of the other objects.
            So, if you want to control the appearance of the objects you should use addChildAt(object, position) method. Position starts from 0. And be careful with indices - there should not be gaps.

            Dmitri.


            • 3. Re: Flex components layering
              JKohn99 Level 1
              You can also alter the layering dynamically as well. Below is one method that I
              just used in an application
              cv is the container (in this case a canvas)
              obj is an entry control that is about to become visible and wants to be on top.
              This moves obj to the top of the display list.

              private function moveToTop(obj:DisplayObject):void
              {
              var lastIdx:int = cv.getChildren().length -1;
              cv.setChildIndex(obj,lastIdx);
              }