DataGridTest.mxml
<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var employees:ArrayCollection = new ArrayCollection(
[{name:"Christina Coenraets", phone:"555-219-2270", email:"ccoenraets@fictitious.com"},
{name:"Joanne Wall", phone:"555-219-2012", email:"jwall@fictitious.com"},
{name:"Maurice Smith", phone:"555-219-2012", email:"maurice@fictitious.com"},
{name:"Mary Jones", phone:"555-219-2000", email:"mjones@fictitious.com"}
]);
]]>
</mx:Script>
<mx:Panel title="DataGrid Control Example" height="100%" width="100%"
paddingTop="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="Select a row in the DataGrid control."/>
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
<mx:Form width="100%" height="100%">
<mx:FormItem label="Name">
<mx:Label text="{dg.selectedItem.name}"/>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:Label text="{dg.selectedItem.email}"/>
</mx:FormItem>
<mx:FormItem label="Phone">
<mx:Label text="{dg.selectedItem.phone}"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>