Grid Layout Container in Flex4

Home Tutorial Flex Flex4 Components Grid Layout Container in Flex4

Grid Layout Container in Flex4
Posted on: May 18, 2010 at 12:00 AM

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

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row3">

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row4">

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row5">

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

<mx:GridItem>

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

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row6">

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

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

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

</s:Panel>

</s:Application>

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

Output:

Running Application:

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

Download this code

Related Tags for Grid Layout Container in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics