`
czwlucky
  • 浏览: 49900 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

Flex.Spark.GridItemRenderer接受外部组件

阅读更多

 

在开发一个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>
 

 

分享到:
评论

相关推荐

    [Flex.3实战].(美)艾哈迈德,(美)赫希,(美)阿比德.扫描版

    《Flex.3实战》这本书由美国的艾哈迈德、赫希和阿比德三位作者共同撰写,旨在为读者提供Flex 3开发的实践经验。Flex是Adobe公司推出的一款用于构建富互联网应用程序(RIA)的开源框架,特别是在创建交互式、数据驱动...

    Flash.Builder.4.&.Flex.4 Flex4

    《Flash.Builder.4.&.Flex.4 Flex4》是一本专为学习Adobe Flash Builder 4和Flex 4技术而编写的指南。这本书如同一场及时雨,为开发者提供了深入理解和掌握这两项技术的宝贵资源。Flash Builder 4是Adobe公司推出的...

    lex与Yacc所需flex.exe bison.exe

    flex.exe和bison.exe是UnxUtils包中的文件,已经将许多Unix/Linux平台的程序都移植到了Windows平台,解压缩之后在系统的PATH环境变量中增加UnxUtils所有的exe文件所在的目录,使 得DOS命令行可以直接搜索到flex.exe...

    Flex.3速记表 AS3.Flex.AIR最新版(pdf)

    这个“Flex.3速记表 AS3.Flex.AIR最新版(pdf)”是一个针对Flex 3开发者的重要参考资料,它涵盖了ActionScript 3(AS3)、Flex框架以及Adobe Integrated Runtime(AIR)的基础知识,帮助开发者快速查找和记忆关键概念...

    [Flex.3实战].(美)艾哈迈德,(美)赫希.zip

    在Flex.3中,开发者可以利用组件库创建各种用户界面元素,如按钮、文本输入框、数据网格等。这些组件可以进行高度自定义,以满足不同设计需求。此外,Flex还提供了数据绑定机制,使得UI与后台数据模型之间的交互变得...

    flex-2.6.4.tar.gz

    2. **主程序**:主程序文件,如`flex.c`和`flex.h`,这些文件用于构建Flex词法分析器生成器本身。 3. **配置脚本**:如`configure`,这是一个自动化脚本,用于检测系统环境并创建合适的Makefile来编译Flex。 4. *...

    New.Riders.Effortless.Flex.4.Development.Jun.2010.rar

    《New.Riders.Effortless.Flex.4.Development.Jun.2010》是一部专注于Adobe Flex 4开发的教程书籍,旨在帮助开发者轻松掌握Flex 4的应用开发技术。Flex是一个开源框架,用于构建富互联网应用程序(Rich Internet ...

    Flex.4.Cookbook.May.2010

    《Flex 4 Cookbook May 2010...书中包含的Oreilly.Flex.4.Cookbook.May.2010.pdf文件,正是这个宝贵知识库的电子版,值得你深入研究。同时,DSC00316.JPG可能是书中的插图或示例截图,有助于更好地理解和应用书中内容。

    Flex4 Spark皮肤

    ### Flex4 Spark皮肤详细制作讲解 #### 一、引言 在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的...

    Flex.3.Language.Reference.cn.zip

    Flex.3.Language.Reference.cn.zip是一个压缩包,包含了Flex 3.0的中文版开发文档,这份文档详尽地阐述了Flex 3.0框架的API,是开发者学习和查询Flex编程的重要参考资料。Flex是一个用于构建富互联网应用程序(RIA)...

    Manning.Flex.4.in.Action

    根据提供的文件信息,本书《Manning.Flex.4.in.Action》是关于Adobe Flex技术的一本详尽指南。Flex是一个用于构建跨浏览器、跨平台的富互联网应用(RIA)的开源框架。本书作为Flex 3 in Action的修订版,对Flex 4...

    flash_flex.rar_flex

    这个“flash_flex.rar_flex”压缩包中的文档“flash_flex.doc”似乎包含了关于AS3和Flex开发的一百条实用知识点。让我们详细探讨这些关键概念和技巧。 1. **ActionScript 3**:AS3是Flash平台的主要编程语言,相比...

    flex3需要用到的flex.war即是lcds.war,现提供下载!

    flex3需要用到的flex.war即是lcds.war,现提供下载! flex.war=lcds.war 此版本为Adobe® LiveCycle® Data Services ES Version 2.6.1

    Flex.3.A.Beginners.Guide

    《Flex.3.A.Beginners.Guide》是一本面向初学者的指南,旨在帮助读者快速掌握Adobe Flex 3这一强大的富互联网应用程序(RIA)开发框架。Flex 3是用于构建交互式、高性能的Web应用的开源工具,它基于ActionScript 3.0...

    Apress.AdvancED.Flex.4.Aug.2010.rar

    2. **Spark组件库**:Flex 4引入了全新的Spark组件库,相比以前的 Halo组件,提供了更多的自定义和样式化选项。读者将学习如何使用Spark组件创建现代、响应式的用户界面,并掌握组件的生命周期和事件处理。 3. **...

    [Flex.on.Java(第1版)].(Flex.on.Java).Bernerd.Allmon&Jeremy;.Anderson.文字版

    2. **Flex组件**:讲解了Flex组件库中的各种UI组件,如按钮、文本框、数据网格等,以及如何自定义组件以满足特定需求。 3. **数据绑定和事件处理**:解释了Flex中的数据绑定机制,使得UI元素与后台数据模型能够实时...

    Flex.3.Language.Reference.cn.rar

    这个压缩包中的"Flex.3.Language.Reference.cn.chm"文件是一个CHM(Compiled HTML Help)格式的帮助文档,包含了Flex 3编程语言的所有关键知识点。 1. **Flex SDK**:Flex SDK是开发Flex应用程序的基础,它包括了...

    Adobe.Flex.4.Language.Reference

    13. **组件和模块**:Flex组件库的使用,以及模块化开发的优势。 14. **服务和数据访问**:与服务器通信的机制,如RemoteObject、WebService、HTTPService等,以及数据绑定和数据模型。 《Adobe Flex 4 Language ...

    Flex 工程源码--EmployeeMgmt-Flex.7z

    这个压缩包"Flex 工程源码--EmployeeMgmt-Flex.7z"包含了名为"EmployeeMgmt-Flex"的Flex项目源代码,很可能是用于员工管理的系统。下面我们将详细探讨Flex的相关知识点。 1. **Flex框架**:Flex是一套完整的开发...

Global site tag (gtag.js) - Google Analytics