1 Reply Latest reply on Jun 7, 2007 9:10 AM by peterent

    Weird add/remove child layout behavior

      I'm trying to build an an app that allows the user to toggle certain panels on and off. These panels are in Divider containers. It seems that at startup, when I remove and add a panel flex doesn't properly validate layout. For example 2 panels are added to a VDivided container. I then call removeChild on the second panel (at the bottom of the container), and the first panel then properly occupies all the visible space. When I add the second panel back, it is re-added but has not retained its original size and is instead compressed at the bottom. If I then remove the top panel and add it again, then remove the bottom panel and add it, everything works as I expect. It's almost like their is a one-time initialization not occurring somewhere. Here is the code sample I am using to demonstrate the problem:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="1000" height="800">
      <mx:VBox height="100%" top="0" left="0" right="0">
      <mx:ApplicationControlBar x="0" y="0" width="100%" height="58">
      <mx:CheckBox label="Panel 1" id="panel1CheckBox" selected="true" click="modifyViewPanel1()"/>
      <mx:CheckBox label="Panel 2" id="panel2CheckBox" selected="true" click="modifyViewPanel2()"/>
      <mx:VDividedBox x="0" y="0" width="100%" height="90%" id="vDivideBox">
      <mx:Panel width="100%" height="50%" layout="vertical" title="Panel 1" id="panel1">
      <mx:Panel width="100%" height="50%" layout="vertical" id="panel2" title="Panel 2">

      private function modifyViewPanel1():void {

      if (panel1.parent) panel1.parent.removeChild(panel1);

      if (panel1CheckBox.selected) {
      vDivideBox.addChildAt(panel1, 0);

      private function modifyViewPanel2():void {

      if (panel2.parent) panel2.parent.removeChild(panel2);

      if (panel2CheckBox.selected) {
      vDivideBox.addChildAt(panel2, vDivideBox.getChildren().length);
        • 1. Re: Weird add/remove child layout behavior
          peterent Level 2
          The properties you set with MXML tags are the initial values, they aren't used to reset the controls. They would have to be dynamic properties like width="{comp1.width/2}" for them to change as the program runs. Setting a component's width to "50%" just means it will initially be calculated to have 50% of the width of its parent. As the program runs the component's width can change which it what's happened.

          Removing a child only removes the component from the parent's display list. The component still exists and adding it back causes the parent to recalculate its layout. This means it may change the size of the children.

          You have a couple of choices. You can give the Panel a minHeight and the Divider will respect that. Or you can calculate the Panel's height, set it to that value, then add it back to the Divider.