box-o-sand/PracticingFlex/03d1-datagrid/DataGridExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<loc:DataGridApp xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:loc="*"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">

    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)"
        fault="faultHandler(event)" />

    <mx:HBox>
        <mx:Label text="Enter Search Terms"/>
        <mx:TextInput id="searchTerms" enter="requestPhotos()" />
        <mx:Button label="Search"
            click="requestPhotos()" />
    </mx:HBox>

    <mx:HBox>
        <mx:DataGrid id="dataGrid"
            visible="false"
            itemClick="showPopup(event)">
            <mx:columns>
                <mx:DataGridColumn  dataField="title" headerText="Title"
                    width="100" >
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Label text="{data.title.getItemAt(0)}"
                            textAlign="center"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn dataField="credit" headerText="Author"
                    width="100" />
                <mx:DataGridColumn dataField="thumbnail" headerText="Photo"
                    width="100">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Image height="75"
                                horizontalAlign="center"
                                source="{data.thumbnail.url}"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>

        <mx:Panel id="popup"
            visible="false"
            click="hidePopup()"
            paddingLeft="10" paddingTop="10" paddingRight="10"
            layout="horizontal">
            <mx:VBox width="325" height="400">
                <mx:Label id="vboxDesc"/>
                <mx:Image id="vboxImage"/>
            </mx:VBox>
        </mx:Panel>
    </mx:HBox>
</loc:DataGridApp>