Changing the layout of container dynamically at runtime

Hi,
   Changing the layout of container dynamically at runtime is one of the problem we all regularly meet with.

Suppose we are using the controlls in the HBox where all childrens are lined up horizontally and suddenly at runtime we need to place the children vertically and on some conditions we need to place all the childrens horizontally then it becomes impossible to do it with HBox
   So to come up with such solution it is always easier to do it with container ‘Box’ which is actually the parent container for VBox and HBox.

With Box Container childrens are by default arranged vertically.
With the “direction” property of Box we can change its layout dynamically.

Hmm Sometimes it didnt work then try it by removing the Height and width of of that container

Following is the small Sample to workout this challege

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:application mx=http://www.adobe.com/2006/mxml  pageTitle=”Changing Layout Dynamically” layout=”absolute” creationComplete=”initCombo()”>

 <mx:script> <![CDATA[  
 import mx.utils.StringUtil;  
 import mx.controls.Alert;
 import mx.controls.Image;
 import mx.collections.ArrayCollection; 
 [Bindable]

 private var prefixArray:ArrayCollection = new ArrayCollection([{Item:'Select'},{Item:'Tel'},{Item:'Mob'},{Item:'Fax'},{Item:'Freephone'},{Item:'24 Hour'},{Item:'Sales'},{Item:'Service'},{Item:'Reservations'},{Item:'Emergency'},{Item:'Textphone'}]);

  private function initCombo():void
 {    
     bx.direction=”horizontal”; 
 }      

  private function  changeSize():void 
  {    
            if(StringUtil.trim(txi.text)!=null && txi.length>3)
           {      
                  bx.direction=”vertical”;        
           }       
          else         
         {              
                bx.direction=”horizontal”;
             }
      }    

]]>  </mx:Script> 

<mx:box id=”bx” x=”76″ y=”231″ width=”500″ height=”100″>
       <mx:textinput id=”txi” change=”changeSize()”>   
      <mx:combobox id=”cmbTest” dataprovider=”{prefixArray}” labelfield=”Item”>

</mx:Box>

</mx:Application>

 
Say Cheese
Thanks and regards
Shashank Kulkarni.
feel free to mail me shashank.pawan@gmail.com