Flex DataGird Add RadioButton

问题：

在DataGrid追加RadioButton的时候，不能达到预期的单选效果。

下面提出解决方法和Source

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark RadioButton component.

@see spark.components.RadioButton
@see spark.components.RadioButtonGroup
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="1">
	
	<fx:Metadata>
		<![CDATA[
		/**
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.RadioButton")]
		]]>
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			/**
			 * @private
			 */
			private static const focusExclusions:Array = ["labelDisplay"];
			
			/**
			 * @private
			 */
			override public function get focusSkinExclusions():Array { return focusExclusions;};
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="up" />
		<s:State name="over" stateGroups="overStates" />
		<s:State name="down" stateGroups="downStates" />
		<s:State name="disabled" stateGroups="disabledStates" />
		<s:State name="upAndSelected" stateGroups="selectedStates" />
		<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
		<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
		<s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
	</s:states>
	
	<s:Group verticalCenter="0" width="13" height="13">
		<!-- drop shadow -->
		<s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
			<s:stroke>
				<s:LinearGradientStroke rotation="90" weight="1">
					<s:GradientEntry color="0x000000"
									 color.downStates="0xFFFFFF"
									 alpha="0.011"
									 alpha.downStates="0" />
					<s:GradientEntry color="0x000000"
									 color.downStates="0xFFFFFF"
									 alpha="0.121"
									 alpha.downStates="0.57" />
				</s:LinearGradientStroke>
			</s:stroke>
		</s:Ellipse>
		
		<!-- fill -->
		<s:Ellipse left="1" top="1" right="1" bottom="1">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="0xFFFFFF"
									 color.overStates="0xBBBDBD"
									 color.downStates="0xAAAAAA"
									 alpha="0.85" />
					<s:GradientEntry color="0xD8D8D8"
									 color.overStates="0x9FA0A1"
									 color.downStates="0x929496"
									 alpha="0.85" />
				</s:LinearGradient>
			</s:fill>
		</s:Ellipse>
		
		<!-- fill highlight -->
		<s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
			<s:fill>
				<s:SolidColor color="0xFFFFFF" alpha="0.33" />
			</s:fill>
		</s:Path>
		
		<!-- layer 6: highlight stroke (all states except down) -->
		<s:Ellipse left="1" right="1" top="1" bottom="1">
			<s:stroke>
				<s:LinearGradientStroke rotation="90" weight="1">
					<s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
					<s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
				</s:LinearGradientStroke>
			</s:stroke>
		</s:Ellipse>
		<s:Rect left="5" top="1" right="5" height="1">
			<s:fill>
				<s:SolidColor color="0xFFFFFF"
							  color.downStates="0x939393"
							  alpha.overStates="0.22" />
			</s:fill>
		</s:Rect>
		
		<!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
		<s:Ellipse left="0" top="0" right="0" bottom="0">
			<s:stroke>
				<s:LinearGradientStroke rotation="90" weight="1">
					<s:GradientEntry color="0x000000" alpha="0.70" />
					<s:GradientEntry color="0x000000" alpha="0.80" />
				</s:LinearGradientStroke>
			</s:stroke>
		</s:Ellipse>
		
		<!-- dot -->
		<!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
		<s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
				data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
			<s:fill>
				<!--- @private
				Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
				<s:SolidColor id="dotFill" color="0" alpha="0.9" />
			</s:fill>
		</s:Path>
		<s:Path left="4" top="7" includeIn="selectedStates"
				data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
			<s:stroke>
				<s:LinearGradientStroke>
					<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
					<s:GradientEntry color="0xFFFFFF" alpha="0.7" />
					<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
				</s:LinearGradientStroke>
			</s:stroke>
		</s:Path>
	</s:Group>
	
	<!-- Label -->
	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
	<s:Label id="labelDisplay"
			 textAlign="start"
			 verticalAlign="middle"
			 maxDisplayedLines="1"
			 left="18" right="0" top="3" bottom="3" verticalCenter="2" />
	
</s:SparkSkin>

 

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
					xmlns:s="library://ns.adobe.com/flex/spark"
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			
			//----------------------------------------------------------------------------------------------------------
			
			override public function prepare(hasBeenRecycled:Boolean):void
			{
				super.prepare( hasBeenRecycled );
				
				// We make the radio button mimic the selection status of the whole row.
				const selected_items: Vector.<Object> = grid.dataGrid.selectedItems;
				
				if( null == selected_items )
				{
					radio_button.selected = false;
					return;
				}
				
				if( -1 != selected_items.indexOf( data ) )
					radio_button.selected = true;
				else
					radio_button.selected = false;
			}
			
			//----------------------------------------------------------------------------------------------------------
			
		]]>
	</fx:Script>
	
	<!--The radio button is only a visual indicator for whether the row is selected or not.
	The "selected" property of the radio_button will be controlled by the "prepare" function.
	The radio_button should not be allowed any user interaction. Hence disabling it.-->
	<s:RadioButton id="radio_button"
				   label=""
				   enabled="false"
				   skinClass="NoDisabledRadioButtonSkin"
				   horizontalCenter="0" verticalCenter="0" />
	
</s:GridItemRenderer>

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="200" >
	<fx:Declarations>
		<fx:Array id="array_bees">
			<fx:Object label="Bumble Bee" />
			<fx:Object label="Honey Bee" />
			<fx:Object label="Stingless Bee" />
			<fx:Object label="Killer Bee" />
			<fx:Object label="Carpenter Bee" />
		</fx:Array>
		
		<s:ArrayCollection id="ac_bees" source="{ array_bees }" />
	</fx:Declarations>
	
	<s:DataGrid id="datagrid_bees"
				left="10" top="10"
				dataProvider="{ ac_bees }">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn id="column_bee_radio_button" headerText=""
							  width="25" sortable="false"
							  itemRenderer="RadioButtonGridItemRenderer"></s:GridColumn>
				
				<s:GridColumn id="column_bee_name" headerText="Bee Name" dataField="label"
							  minWidth="200" maxWidth="300"/>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
</s:Application>