Flex - how to create a simple inline checkbox itemeditor in a spark datagridcolumn?

Question

Looking at the flex 4.6 (flash builder) documentation, it shows an example of creating an item editor for a data grid column, but their example is using the "mx" library. I am trying to stick to using the spark library. I can not seem to come up with equivelent working code in spark:

Here is their code:

            <mx:itemEditor>
                <fx:Component>
                    <mx:VBox backgroundColor="yellow">          
                        <fx:Script>
                            <![CDATA[
                                // Define a property for returning 
                                // the new value to the cell.
                                [Bindable]
                                public var cbSelected:Boolean;
                            ]]>     
                        </fx:Script>

                        <mx:CheckBox id="followUpCB" 
                            label="Follow up needed" 
                            height="100%" width="100%" 
                            selected="{data.FollowUp}" 
                            click="cbSelected=followUpCB.selected"/>
                    </mx:VBox>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>

I want to do exactly the same thing, but using a spark data grid and , spark check box and VGroup, etc.

Is it possible/how?

Update: A little progress, I have it partially working now by looking at various examples. It draws the check box, and I am able to click the check box to change the value, HOWEVER, it seems like it is not triggering the data grid to change/update. For example, I have to edit a different field in the data grid in order for the data grid to update and save back to the sever. I am using gridItemEditorSessionSave event:

<s:DataGrid  id="recsDG"  width="100%" height="100%" dataProvider="{_recs}"
                 editable="true" gridItemEditorSessionSave="recsDG_gridItemEditorSessionSaveHandler(event)"  alternatingRowColors="[#FFFFFF, #CCCCCC]">

...

<s:GridColumn headerText="active" dataField="active" rendererIsEditable="true" >
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                              <s:CheckBox id="test124" selected="{(data.active==1)}"
                                          change="{data.active=int(test124.selected)}"/>

                            </s:GridItemRenderer>

                        </fx:Component>
                    </s:itemRenderer>

                </s:GridColumn>