3 Replies Latest reply on Oct 21, 2010 1:37 AM by flex@relax

    Multiple Rows in HBox in Flex

    flex@relax Level 1

      Hi,

            I am using an Hbox that is populated with simple button controls at runtime. The HBox and buttons to be populated inside are both of fixed width. But the problem is that it only populates the buttons in a straight horizotal way, though as it should.

       

      But I need it to populate the buttons until the width of HBox and then in the second row until it fills till the width of HBox so that no scroll bar appears.

       

      I'm using a simple code as below.

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                      minWidth="955" minHeight="600"
                      backgroundColor="white">
         
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                 
                  private var counter:int        =    0;
                 
             
                  protected function button1_clickHandler(event:MouseEvent):void
                  {
                 
                      var button:Button    =    new Button();
                      hbButtons.addChild(button);
                     
                      button.width    =    80;
                      button.height    =    25;
                      button.label    =    "button " + counter++;
                     
                      button.addEventListener(MouseEvent.CLICK, onButtonClick);               
                  }
                 
                  private function onButtonClick(event:MouseEvent):void {
                 
                      Alert.show(" Hello Brother! I'm inside the Horizontal Box ",(event.target as Button).label);
                  }

       

              ]]>
          </mx:Script>
          <mx:Button x="74" y="102" label="Add Button" height="36" width="121"
                     click="button1_clickHandler(event)"/>
         
          <mx:HBox id="hbButtons" x="74" y="146" width="586" height="100"
                   paddingLeft="10" paddingTop="10"
                   borderStyle="solid" borderThickness="2"
                   borderColor="black">
          </mx:HBox>
         
         
      </mx:Application>

       

       

       

      Is there any way of doing this.