Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/determining-if-a-flex-application-has-focus-using-the-activate-and-deactivate-events/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        activate="application_activate(event);"
        deactivate="application_activate(event);">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function application_activate(evt:Event):void {
                arrColl.addItemAt({type:evt.type, time:getTimer()}, 0);
            }

            private function time_labelFunc(item:Object, col:DataGridColumn):String {
                return numberFormatter.format(item[col.dataField]);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:NumberFormatter id="numberFormatter"
            useThousandsSeparator="true" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="320"
            rowCount="8"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="time"
                    headerText="time (ms)"
                    labelFunction="time_labelFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

To test the previous example, try clicking within the Flex application and then click on the surrounding HTML, you should see the “activate” and “deactivate” events get dispatched and create new items in the DataGrid control.