Search Flex Components Free

Custom Search

July 6, 2009

Customizing Flex DataGrid with ItemRenderer

In this example I will be using an ArrayCollection as the data provider for the DataGrid. The ArrayCollection is of objects that represent web sites. Each object contains a Name and a URL. The data will be displayed with some customization. The customization include color, decoration, and action. Each of the items displayed will be linkable to the appropriate web site.
  • Define the DataGrid Control

    useHandCursor="true" buttonMode="true"
    click='navigateToURL(new URLRequest(data.URL),"_mine")'

    data refers the object being rendered. So, data.Name refers the the instance data Name within the object. Here the item renderer defines each item from the site list as a label. The label is then styled as follows:

    • The text is assigned the color #009ad4

    • Text is underlined when the cursor is placed on it and removed when rolled out.

    • It uses the hand cursor for the mouse

    • When text is clicked it calls navigateToURL method to launch the web site. If click event is calling a method defined in your file, you need to qualify the call withouterDocument to bring the functions within scope. For example, 

Related Flex Tutorials