5 Replies Latest reply on Aug 31, 2010 8:01 AM by Devtron

    Toggle between display objects in Canvas

    ameshram Level 1

      Hi All,


      I have a Canvas container with two Panel containers inside it.

      The size of one panel is larger than other one. Both these Panels are on x and y coordinate 0,0. So you can see one panel and half of another panel.

      The requirement is....

      I have two buttons, if I click on one of them... the first panel should come up... and if I click on second button, another panel should come up (hence I can half of another panel)

      Is there a way I can toggle between them.(Can't use view stack, because both component needs to be visible partially) This is just a demo exercise of what m trying to do within an application.


      Can someone spread a light on this, if its possible.



        • 1. Re: Toggle between display objects in Canvas
          Devtron Level 3

          in a button click event, you need to set the visibiltiy of your panel(s).





          and vice versa.

          • 2. Re: Toggle between display objects in Canvas
            ameshram Level 1

            Thanks for the response Devtron.

            I guess, I couldnt present my question properly.

            This is what is happening...


            In my Canvas, I have two panels...like this...




                 <mx:Panel x=0 y=0 width=50>




                 <mx:HBox x=50 y=0 width=100%>





            At this point they both look fine... on click of a button.. I hide the Panel. (by setting visible=false) and set the x property of HBox to 0. (so both Panel and HBox are at 0,0 now... Panel invisible though). However, now when I make the panel visible, it displays at the bottom and doesnt come on top of HBox. Is there a way to come up at top.??


            -Thanks again..!

            • 3. Re: Toggle between display objects in Canvas
              BhaskerChari Level 4

              Hi ameshram,


              Try to put your both panels inside a VBox instead of Canvas(which has absolute positioning...)



              <mx:VBox verticalGap="0">


                   <mx:Panel id="panel" x=0 y=0 width=50>




                   <mx:HBox x=50 y=0 width=100%>






              On a  button click make ....


              panel.visible = false;

              panel.includeInLayOut = false;


              Again if you want to make it visible then just do the same as below...


              panel.visible = true;

              panel.includeInLayOut = true;



              No need to set the x, y positions if you do the above ...




              Bhasker Chari

              • 4. Re: Toggle between display objects in Canvas
                Devtron Level 3

                Hello BhaskerChari,


                I am in a similar situation. I have a VBOX with an HBOX/Grid, two Panels. Here is my code:


                    <mx:VBox width="100%" height="100%" paddingLeft="50" borderColor="#84CBDA" id="myVBOX" >


                                <mx:HBox width="90%" height="90%" verticalAlign="middle" borderColor="#84CBDA">

                                    <mx:DataGrid />



                                 <mx:Panel title="Override Selected Thermostats: "  visible="false" id="multiPanel" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >

                                               <mx:Form />







                            <mx:Panel title="Configure Thermostat"  visible="false" id="singlePanel" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" verticalAlign="top" >


                                                   <mx:Form />

















                My problem is, I toggle visibility between the two panels, depending on what is clicked in the DataGrid. if single selection is used, I displayed one panel (but I must set the absolute position over the hidden panel)., if multi-selection is used, I display the other panel. That works fine, until I resize my browser. If the second panel is visible, while the first panel is hidden, and I press the "Restore Down" button in firefox or IE, the panel repositions.

                Here is the code I use in the Grid click event:

                                    singlePanel.y = multiPanel.y;
                                    singlePanel.x = multiPanel.x;


                ^ This places the panel where I need it (ontop of the other one) but when I hit the "restore down" button in IE/FireFox, it repositions it to its original layout X,Y. How can I keep its X,Y position on a "restore down" command in a browser? Is there a way to capture "Restore Down" browser change, so I can keep the X,Y current?

                • 5. Re: Toggle between display objects in Canvas
                  Devtron Level 3

                  I actually used this to "watch" resize events, and re-positioned my panel there (in handleResize). It worked like a charm. I wish FLEX was easier than this tho.



                              private var widthWatch:ChangeWatcher;
                              private var heightWatch:ChangeWatcher;
                              private var resizeExecuting:Boolean = false;


                              private function OnCreateionComplete(event:FlexEvent):void {

                                  //browser resize watcher, listener objects
                                  widthWatch = ChangeWatcher.watch(this,'width',onSizeChange);
                                  heightWatch = ChangeWatcher.watch(this,'height',onSizeChange);



                              //browser resize function
                              private function onSizeChange(event:Event):void
                                  resizeExecuting = true;
                              //browser resize function
                              private function handleResize():void
                                  //do resize work here
                                  resizeExecuting = false;


                                  singlePanel.y = multiPanel.y;
                                  singlePanel.x = multiPanel.x;
                              //browser resize function
                              private function stopWatching():void
                                  //invoke this to stop watching the properties and prevent the handleResize method from executing