Grid Layout Container in Flex4


 

Grid Layout Container in Flex4

The Grid Layout Container is a MX container. There is no Spark equivalent. It's like an HTML Table. You can arrange children(Component) in a row and column format.

The Grid Layout Container is a MX container. There is no Spark equivalent. It's like an HTML Table. You can arrange children(Component) in a row and column format.

Grid Layout Container in Flex4:

The Grid Layout Container is a MX container. There is no Spark equivalent.
It's like an HTML Table. You can arrange children(Component) in a row and column format. The height of cells in a row are same but each row can have a different height. You can take many cells in a row and each cell can have a Grid container. The default Horizontal and Vertical alignment of cell is left, Top.
You can use three things for creating a Grid layout container.
1. <mx:Grid> THis is the Grid layout container tag it holds numbar of <mx:GridRow>.
2. <mx:GridRow> It is used for make a row and it holds number of <mx:GridItem>.
3. <mx:GridItem> It is used for make a cell in a row.
You can use the rowSpan and colSpan property for merge rows and columns.

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">

<s:Panel title="Grid Layout Container Example" width="342" height="239">

<mx:Grid id="languageGrid"

paddingLeft="20"

paddingTop="20"

width="340"

height="206"

backgroundColor="0x808080">

<mx:GridRow id="row1" height="26">

<mx:GridItem horizontalAlign="center" colSpan="4">

<s:Label text="Language Known" fontFamily="verdhana" fontSize="18"

 fontWeight="bold"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row2">

<mx:GridItem>

<s:TextInput id="txt1" text="First language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk1" label="Read"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk2" label="Write"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk3" label="Speak"/>

0

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row3">

1

<mx:GridItem>

<s:TextInput id="txt2" text="Second language" fontStyle="italic"/>

</mx:GridItem>

2

<mx:GridItem>

<s:CheckBox id="chk4" label="Read"/>

</mx:GridItem>

3

<mx:GridItem>

<s:CheckBox id="chk5" label="Write"/>

</mx:GridItem>

4

<mx:GridItem>

<s:CheckBox id="chk6" label="Speak"/>

</mx:GridItem>

5

</mx:GridRow>

<mx:GridRow id="row4">

<mx:GridItem>

6

<s:TextInput id="txt3" text="Third language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

7

<s:CheckBox id="chk7" label="Read"/>

</mx:GridItem>

<mx:GridItem>

8

<s:CheckBox id="chk8" label="Write"/>

</mx:GridItem>

<mx:GridItem>

9

<s:CheckBox id="chk9" label="Speak"/>

</mx:GridItem>

</mx:GridRow>

0

<mx:GridRow id="row5">

<mx:GridItem>

<s:TextInput id="txt4" text="Fourth language" fontStyle="italic"/>

1

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk10" label="Read"/>

2

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk11" label="Write"/>

3

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk12" label="Speak"/>

4

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row6">

5

<mx:GridItem colSpan="4" horizontalAlign="right">

<s:Button id="btn" label="Submit"/>

</mx:GridItem>

6

</mx:GridRow>

</mx:Grid>

</s:Panel>

7

</s:Application>

In this example you can see how we can use a Grid Layout Container control in Flex4.

Output:

8

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

9

Ads