DividedBox Container in Flex4

The DividedBox container is a MX component. There is no Spark Component.
The DividedBox container is used for both horizontal and vertical layout in which the children components are arrange in horizontal and vertical manner respectively.
You can set the direction property for horizontal and vertical layout. It is similar to a Box container, except the DividedBox container contains a divider between each child component. You can use a mouse to move a divider for resize the component area. The tag of DividedBox Container is <mx:DividedBox>.

In this example you can see that how we can use the DividedBox container as horizontally and vertically.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

private function grid_initialize():void {

grid.dataProvider = [

{aName:'Bikrant', DOB:'01/01/1986',

City:'Delhi', State:'NewDelhi'},

{aName:'Brijesh', DOB:'15/07/1984',

City:'Noida', State:'Uttar Pradesh'},

{aName:'Gaurav', DOB:'27/06/1989',

City:'Mumbai', State:'Maharashtra'}

];

}

]]>

</fx:Script>

<s:Panel title="DividedBox Container Example" width="590" height="393">

<mx:DividedBox direction="horizontal" x="11" y="11">

<mx:Tree id="tree"

width="156" height="100%"

labelField="@label">

<fx:XMLList id="collegedata">

<node label="College">

<node label="History"/>

<node label="About us"/>

0
<node label="Courses">

<node label="B.Tech.">

<node label="CS"/>

1
<node label="EC"/>

<node label="EI"/>

<node label="IT"/>

2
</node>

<node label="MBA">

<node label="Finance"/>

3
<node label="Marketing"/>

<node label="HR"/>

</node>

4
<node label="MCA"/>

<node label="B.Pharma."/>

</node>

5
<node label="Department">

<node label="Computer Science"/>

<node label="Electronics"/>

6
<node label="Managenent"/>

</node>

<node label="Feedback"/>

7
<node label="Contact us"/>

</node>

</fx:XMLList>

8
</mx:Tree>

<mx:DividedBox direction="vertical">

<mx:DataGrid id="grid"

9
width="100%" height="100%"

initialize="grid_initialize();"

change="txt.text='Name:'+ ' ' +

0
event.currentTarget.selectedItem.aName

+ '\n' + 'City:'+ ' ' +

event.currentTarget.selectedItem.City

1
+ '\n' + 'DOB:'+ ' ' +

event.currentTarget.selectedItem.DOB

+ '\n' + 'State:'+ ' ' +

2
event.currentTarget.selectedItem.State;"/>

<s:TextArea id="txt"

width="100%"

3
height="40%"

text="Select an item from Table"

textAlign="center"

4
color="#990000"

fontFamily="verdana"/>

</mx:DividedBox>

5
</mx:DividedBox>

</s:Panel>

</s:Application>

6

Output: