Macromedia flex builder-using flex builder User Manual

Tutorial: Building custom components with Flex Builder

49

3.

Click the Plus (+) button to add a third column, and then set the following options in the 
DataGrid dialog box:

■

ID

: dg

■

Header Text (first row)

: Name

■

Header Text (second row)

: Qty

■

Header Text (third row)

: Price

■

Column Name (first row)

: name

■

Column Name (second row)

: qty

■

Column Name (third row)

: price

The DataGrid dialog box should look similar to the following figure:

4.

Click OK. 

Flex Builder inserts a DataGrid component in your component file. 

5.

Click the DataGrid component to select it and set the following properties in the Attributes 
panel:

■

Size > height

: 100%

■

Size > width

: 100%

6.

Switch to Code view (View > Code) and set the column properties of the DataGrid component 
by locating the three 

<mx:DataGridColumn>

 tags and adding the following properties (shown 

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.

7.

To make sure the component fits correctly in the Flex Store user interface, locate and delete the 

height

 and 

width

 properties in the 

<mx:Panel>

 tag.

8.

Save your work.