MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 49

Click the Plus (+) button to add a third column, and then set the following options in the
3.
DataGrid dialog box:
: dg
ID
Header Text (first row)
Header Text (second row)
Header Text (third row)
Column Name (first row)
Column Name (second row)
Column Name (third row)
The DataGrid dialog box should look similar to the following figure:
Click OK.
4.
Flex Builder inserts a DataGrid component in your component file.
Click the DataGrid component to select it and set the following properties in the Attributes
5.
panel:
: 100%
Size > height
: 100%
Size > width
Switch to Code view (View > Code) and set the column properties of the DataGrid component
6.
by locating the three
in bold type):
<mx:DataGridColumn headerText="Name" columnName="name" width="180" />
<mx:DataGridColumn headerText="Qty" columnName="qty" width="50"
textAlign="right" marginRight="4" />
<mx:DataGridColumn headerText="Price" columnName="price" width="60"
textAlign="right" marginRight="4" />
Tip: You can use Code hints to quickly set these properties.
To make sure the component fits correctly in the Flex Store user interface, locate and delete the
7.
and properties in the
height width
Save your work.
8.
: Name
: Qty
: Price
: name
: qty
: price
<mx:DataGridColumn>
<mx:Panel>
Tutorial: Building custom components with Flex Builder
tags and adding the following properties (shown
tag.
49