RadioButton functionality in custom component

Question

I am trying to create an xmxl component which contains an image and a radio button. The main application script will use several of these components.

I am having problems trying to get the RadioGroup to function properly. I have binded a variable on the RadioButton groupName attribute in the component mxml file so I can set this in the main application script.

This functions properly as when I tab through each RadioGroup, only the first radiobutton of each group gets the focus. But when I click each radio button in a group, the previous one does not deselect.

I have read that I cannot bind component id's so how else can I achieve selecting only one radio button in each group? Do I need to implement IFocusManager?

Thank You

Answer 1

Each group of RadioButtons needs a RadioButtonGroup assigned to the groupName. The RadioButtonGroup makes sure only 1 button is selected at a time. The RadioButtonGroup is declared in <fx:Declarations> and is the name of the RadioButtonGroup is assigned in the groupName property.

    <fx:Declarations>
        <s:RadioButtonGroup id="paymentType" itemClick="handlePayment(event);"/>
    </fx:Declarations>
    <s:VGroup paddingLeft="10" paddingTop="10">
        <s:RadioButton groupName="paymentType" 
                       id="payCheck" 
                       value="check" 
                       label="Pay by check" 
                       width="150"/>
        <s:RadioButton groupName="paymentType" 
                       id="payCredit" 
                       value="credit" 
                       label="Pay by credit card" 
                       width="150"/>
    </s:VGroup>

The Apache Flex reference: http://flex.apache.org/asdoc/spark/components/RadioButtonGroup.html