<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/06/determining-when-the-selected-state-of-a-fxtogglebutton-control-changes-in-flex-gumbo/ -->
<s:Application name="Spark_ToggleButton_change_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">

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

            private function btn_change(evt:Event):void {
                var obj:Object = {};
                obj.selected = btn.selected;
                obj.time = new Date();

                arrColl.addItemAt(obj, 0);
                if (arrColl.length > dataGrid.rowCount) {
                    arrColl.removeItemAt(dataGrid.rowCount);
                }
            }

            private function time_labelFunc(item:Object, col:DataGridColumn):String {
                return item.time.toTimeString();
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:ArrayCollection id="arrColl" />
    </fx:Declarations>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:ToggleButton id="btn"
                label="{btn.selected}"
                baseColor="haloBlue"
                change="btn_change(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            draggableColumns="false"
            width="300"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="selected" />
            <mx:DataGridColumn dataField="time"
                    labelFunction="time_labelFunc" />
        </mx:columns>
    </mx:DataGrid>

</s:Application>