[flexcoders] Flex 3 itemrenderer states

[jeremysavoy]

I have a custom mxml component that is being used as an itemrenderer in a list 
(or datagrid). The component has two states, one that shows a contacts name and 
a button, and the other state is expanded and shows the contacts address and 
the button. The button is used to change states.

I can see both states when I view the itemrenderer component, but when I run my 
app, I only see the base state of the itemrenderer, i.e., the button to expand 
to the second state does not work.

In addition, I tried adding mouseOver and mouseOut to the compenent top level 
(VBox) as the trigger to change state, and when that happened, I noticed the 
button text did change from + to - as expected, so the state did actually 
change, its just that the size of the box did not expand as expected.

I've searched for 3 days on a way to do this, maybe my search text is incorrect 
or I'm just looking in the wrong places, but I can't find anything to help .... 
any ideas??

Here is my custom mxml itemrenderer component:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";
        width="100%">

        <mx:Script>
                <![CDATA[
                        private function changeState():void {
                                if (this.currentState == '')
                                        this.currentState = 'ExpandRow';
                                else
                                        this.currentState = '';
                        }
                ]]>
        </mx:Script>

                <mx:HBox width="100%" fontSize="14">
                        <mx:Label text="{data.First_Name} {data.Last_Name}"/>
                        <mx:Spacer width="100%"/>
                        <mx:Label text="{data.Role}" fontSize="12"/>
                        <mx:LinkButton id="expBtn" label="+" 
click="changeState()"/>
                </mx:HBox>
                
        <mx:states>
                <mx:State name="ExpandRow">
                        <mx:AddChild position="lastchild">
                                <mx:VBox width="100%">
                                        <mx:Label text="{data.Street}"/>
                                        <mx:Label text="{data.City} , 
{data.State}   {data.Zip}"/>
                                        <mx:Label text="{data.Country}"/>
                                </mx:VBox>
                        </mx:AddChild>
                        <mx:SetProperty target="{expBtn}" name="label" 
value="-"/>
                </mx:State>
        </mx:states>

</mx:VBox>