6 Replies Latest reply on Feb 24, 2010 6:20 AM by chieffan

    Wrap Panel container

    chieffan Level 1

      I am dynamically creating four panels that contain information inside a vbox.  The data is displayed vertically down the left of the page item 1 -4.  What I want is to have two across the top and two across the bottom.  I have looked around and am not sure this can be done without extending either the panel, vbox or container class.

       

      Thanks for the help.

        • 1. Re: Wrap Panel container
          archemedia Level 4

          It's not clear what you want to achieve. Can you post a sketch or so?

           

          Dany

          • 2. Re: Wrap Panel container
            chieffan Level 1

            Sure.

             

            Tab | Tab
            Panel 1
            Pan 1 content

             

            Panel 2
            Pan 2 content

             

            Panel 3
            Pan 3 content

             

            Panel 4
            Pan 4 content


            What I want is

             

            Tab | Tab
            Panel 1Panel 2
            Pan 1 contentPan 2 content
            Panel 3Panel 4
            Panel 3 contentPanel 4 content

            • 3. Re: Wrap Panel container
              archemedia Level 4

              Something like this?

               

              <mx:Panel layout="vertical" width="100%" height="100%">
                     
                      <mx:HBox width="100%">
                          <mx:Panel title="p1" width="100%">
                              <mx:Label text="content"/>
                          </mx:Panel>
                          <mx:Panel title="p2" width="100%">
                              <mx:Label text="content"/>
                          </mx:Panel>
                      </mx:HBox>
                      <mx:HBox width="100%">
                          <mx:Panel title="p3" width="100%">
                              <mx:Label text="content"/>
                          </mx:Panel>
                          <mx:Panel title="p4" width="100%">
                              <mx:Label text="content"/>
                          </mx:Panel>
                      </mx:HBox>

              </mx:Panel>

               

              Dany

              • 4. Re: Wrap Panel container
                chieffan Level 1

                Not quite.  I am building all this via actionscript so I can't split out the panels like that.  I am using addChild then panels, etc.

                • 5. Re: Wrap Panel container
                  archemedia Level 4

                  And this?

                   

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

                   

                      <mx:Script>
                          <![CDATA[
                              import mx.controls.Label;
                              import mx.containers.HBox;
                              import mx.containers.Panel;
                             
                              private function init():void
                              {
                                  var mainPanel:Panel = new Panel();
                                  mainPanel.percentWidth = 100;
                                  mainPanel.percentHeight = 100;
                                  mainPanel.layout = "vertical";
                                 
                                  var hbox1:HBox = new HBox();
                                  hbox1.percentWidth = 100;
                                 
                                  var hbox2:HBox = new HBox();
                                  hbox2.percentWidth = 100;
                                 
                                  var p1:Panel = new Panel();
                                  p1.title = "p1";
                                  p1.percentWidth = 100;
                                  var l1:Label = new Label();
                                  l1.text = "content";
                                  p1.addChild(l1);
                                 
                                  var p2:Panel = new Panel();
                                  p2.title = "p2";
                                  p2.percentWidth = 100;
                                  var l2:Label = new Label();
                                  l2.text = "content";
                                  p2.addChild(l2);
                                 
                                  var p3:Panel = new Panel();
                                  p3.title = "p3";
                                  p3.percentWidth = 100;
                                  var l3:Label = new Label();
                                  l3.text = "content";
                                  p3.addChild(l3);
                                 
                                  var p4:Panel = new Panel();
                                  p4.title = "p1";
                                  p4.percentWidth = 100;
                                  var l4:Label = new Label();
                                  l4.text = "content";
                                  p4.addChild(l4);
                                 
                                  hbox1.addChild(p1);
                                  hbox1.addChild(p2);
                                 
                                  hbox2.addChild(p3);
                                  hbox2.addChild(p4);
                                 
                                  mainPanel.addChild(hbox1);
                                  mainPanel.addChild(hbox2);
                                 
                                  addChild(mainPanel);
                              }
                          ]]>
                      </mx:Script>
                  </mx:Application>

                   

                   

                  Dany

                  • 6. Re: Wrap Panel container
                    chieffan Level 1

                    Thanks, Dany. Works great and much cleaner then the code I was using.