Question

In Flex 3, I used to be able to take 2 panels, lay them out with 100% width settings in an HBox. If I changed the width property of the first panel to something smaller, let’s say 20%, the second would automatically update and fill in the space that used to be taken up by the first as the first resized down.

I notice in spark, this doesn’t happen. I have an app with a HorizontalLayout, and a resizable panel control on the left and a panel on the right that has width=”100%.” When I resize my left-side panel down, the right side panel doesn’t do anything. So I end up with a clean resizable panel, a bunch of wasted space, and my right-side panel just sitting there.

What I expect is that since the right-side panel has a width=”100%” then if the panel to its left is resized, then there would be a corresponding growth in the right-side panel to fill in.

I’ve tried to manually trigger validation on properties and size without effect. I’m wondering what changed in the HorizontalLayout that no longer allows this technique to work. I would also like to know what solutions are available?

Here’s some chomp chomp:

<mx:Application>

   <mx:Script>
      <![CDATA[

         protected function resizeClick(event:MouseEvent):void
         {
            pnl1.percentWidth = 10;  // When this would execute, pnl2 would automatically
                                     // fill in the space previously held by pnl1.
         }

      ]]>
   </mx:Script>
   <mx:HBox width="100%" height="100%">
      <mx:Panel id="pnl1" width="40%" height="100%">  // Uses 40%
         <mx:Button id="resizeButton" click="resizeClick(event)"/>
      </mx:Panel>
      <mx:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space
   </mx:HBox>
</mx:Application>

Flex 4.5 doesn’t automatically update the size of pnl2 when the size of pnl1 changes. I would think that since a HorizontalLayout is being used, that both children would update when the width of one of them was changed. But that just doesn’t seem to be the case. I know I can create two states to accomplish this, but I was thinking that I shouldn’t have to for something so trivial.

Answer 1

So this is how I eventually solved this problem. I should have been a little more specific in my post to explain that Panel 1 is actually a “collapsible” panel that modifies its own size whenever its header button is clicked. The example above does work, but since there is no numeric control on the view to “tell” the panel.percentWidth property how much to change, I set my collapsible panel up to dispatch custom events that are handled by the wrapper. The custom events basically indicate what is happening to the collapsible panel. From there, I can handle the events separately and then control the size of Panel 2.

The solution is actually rather simple and I was hoping for something a little more “behind the scenes” but this worked fine.

<s:Application initialize="initApp(event)">

   <fx:Script>
      <![CDATA[

         protected function initApp(event:FlexEvent):void
         {
              this.addEventListener("PanelCollapse", panelHandler);
              this.addEventListener("PanelNormal", panelHandler);
         }    

         protected function panelHandler(event:Event):void
         {
             switch(event.type)
             {
                case "PanelCollapse":
                   pnl2.percentWidth = 100;
                   break;
                case "PanelNormal":
                   pnl2.percentWidth = 60;
                   break;
             }
         }
      ]]>
   </fx:Script>

      <comp:CollapsiblePanel id="pnl1" width="40%" height="100%">

      </mx:Panel>
      <s:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space

</s:Application>