Hiding the content pane in a Flex Panel

Question

I am writing an custom component in Flex 3.2 that extends the panel component. After a user performs a certain action I would like to hide the main content area in the Panel component, as well as the Control Bar if one is specified. Any ideas on how to do this? controlBar.visible does not seem to hide the control bar, and I don't know of another easy way of accessing the main content area besides iterating through all the children of the main panel, and I would like to avoid that if possible. Thanks

Answer 1

Couldn't you set one main container, whether a HBox or VBox etc... inside your Panel that would contain all the children, then you could toggle this container visibility depending on the user's action.

As for the ControlBar , you should be able to change its visibility value...

Answer 2

The reason you can't seem to hide the controlbar, is because you are only setting it's visible property - it's still taking up it's space. So, to truly "hide" it, do this:

myControlBar.includeInLayout = false;

Also, to hide all you children, only requires a simple loop:

for each (var oChild:DisplayObject in idPanel.getChildren()) {
    oChild.visible = false;
}

So, the entire application would look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
    <![CDATA[
        private function doit(): void {
            idControl.visible = false;
            idControl.includeInLayout = false;

            for each (var oChild:DisplayObject in idPanel.getChildren()) {
                oChild.visible = false;
            }
        }
    ]]>
</mx:Script>

<mx:Button x="10" y="10" label="Button" click="doit()"/>
<mx:Panel x="83" y="10" width="250" height="200" layout="absolute" id="idPanel">
    <mx:CheckBox x="10" y="10" label="Checkbox"/>
    <mx:DateField x="10" y="40"/>
    <mx:ControlBar id="idControl">
    </mx:ControlBar>
</mx:Panel>

</mx:Application>

Hope that helps!