Flex.Spark.GridItemRenderer接受外部组件 博客分类： FlexAir FlexAirGridItemRendererSpark

 

在开发一个GridItemRenderer时，我希望将一个RadioButtonGroup进来，这样即使在DataGrid中，也可以使单选按钮起作用。　最开始我是通过将这个RadioButtonGroup放入数据中带进来的，但很快我意识到这样的做法太不好了。　因为这个组件完全不应该是数据的一部分。所以我试着将它直接传递给GridItemRenderer。　也就有了下面的代码。

 

<?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" width="100%" height="100%"
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			import com.mouee.test.exam.model.OptionItem;
			
			import mx.collections.ArrayCollection;
			
			import spark.components.RadioButtonGroup;
			
			[Bindable]
			private var _radioGroup:RadioButtonGroup;
			
			public function set radioGroup(group:RadioButtonGroup):void
			{
				trace("set radiogroup");
				this._radioGroup = group;
			}
			// 如果没有这个方法是会报错的，跟踪可以发现该方法会在setter调用之前调用一次，之后再调用一次，原因未知。
			public function get radioGroup():RadioButtonGroup
			{
				trace("get radiogroup");
				return this._radioGroup;
			}
			// 本来是想通过这个方法将外部组件引入
			override public function prepare(hasBeenRecycled:Boolean):void {
				if( data )
				{
					//radio.selected = Boolean(data[column.dataField]);
					//radio.group = data.group;
				}
			}
			
			protected function radio_changeHandler(event:Event):void
			{
				if( radio.selected )
				{
					var options:ArrayCollection = column.grid.dataProvider as ArrayCollection;
					for(var i:uint = 0; i < options.length; i++)
					{
						if( i == this.rowIndex)
						{
							OptionItem(options.getItemAt(i)).selected = true;
						}
						else
						{
							OptionItem(options.getItemAt(i)).selected = false;
						}
					}
				}
				
			}
			
		]]>
	</fx:Script>
	
	<s:RadioButton id="radio" horizontalCenter="0" group="{_radioGroup}" selected="{data.selected}" change="radio_changeHandler(event)"/>
	
</s:GridItemRenderer>

 

 

下面看看引用这个ItemRenderer的代码：

 

<fx:Declarations>
	<s:RadioButtonGroup id="radioGroup"/>
</fx:Declarations>

<s:DataGrid id="grid" width="100%" height="100%" dataProvider="{_options}"
							editable="true">
					<s:columns>
						<s:ArrayList>
							<s:GridColumn width="60" dataField="selected" editable="false"
										  headerText="Correct">
								<s:itemRenderer>
									<fx:Component>
										<renderer:RadioItemRenderer radioGroup="{radioGroup}"/>
									</fx:Component>
								</s:itemRenderer>
							</s:GridColumn>
							<s:GridColumn dataField="title" headerText="Premise"></s:GridColumn>
						</s:ArrayList>
					</s:columns>
				</s:DataGrid>

 

　编译后会有一个警告，目前还没有找到解决办法: 

 

数据绑定将无法检测对“radioGroup”的指定。

 

 

请注意第一段代码中斜体，其实这段代码已经可以保证单按钮钮的选中状态了。所以，这个renderer可以简化为这样：

<?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" width="100%" height="100%"
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			import com.mouee.test.exam.model.OptionItem;
			
			import mx.collections.ArrayCollection;
			
			protected function radio_changeHandler(event:Event):void
			{
				if( radio.selected )
				{
					var options:ArrayCollection = column.grid.dataProvider as ArrayCollection;
					for(var i:uint = 0; i < options.length; i++)
					{
						if( i == this.rowIndex)
						{
							OptionItem(options.getItemAt(i)).selected = true;
						}
						else
						{
							OptionItem(options.getItemAt(i)).selected = false;
						}
					}
				}
				
			}
			
		]]>
	</fx:Script>
	
	<s:RadioButton id="radio" horizontalCenter="0" selected="{data.selected}" change="radio_changeHandler(event)"/>
	
</s:GridItemRenderer>