在开发一个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是Adobe公司推出的一款用于构建富互联网应用程序(RIA)的开源框架,特别是在创建交互式、数据驱动...
《Flash.Builder.4.&.Flex.4 Flex4》是一本专为学习Adobe Flash Builder 4和Flex 4技术而编写的指南。这本书如同一场及时雨,为开发者提供了深入理解和掌握这两项技术的宝贵资源。Flash Builder 4是Adobe公司推出的...
flex.exe和bison.exe是UnxUtils包中的文件,已经将许多Unix/Linux平台的程序都移植到了Windows平台,解压缩之后在系统的PATH环境变量中增加UnxUtils所有的exe文件所在的目录,使 得DOS命令行可以直接搜索到flex.exe...
这个“Flex.3速记表 AS3.Flex.AIR最新版(pdf)”是一个针对Flex 3开发者的重要参考资料,它涵盖了ActionScript 3(AS3)、Flex框架以及Adobe Integrated Runtime(AIR)的基础知识,帮助开发者快速查找和记忆关键概念...
在Flex.3中,开发者可以利用组件库创建各种用户界面元素,如按钮、文本输入框、数据网格等。这些组件可以进行高度自定义,以满足不同设计需求。此外,Flex还提供了数据绑定机制,使得UI与后台数据模型之间的交互变得...
2. **主程序**:主程序文件,如`flex.c`和`flex.h`,这些文件用于构建Flex词法分析器生成器本身。 3. **配置脚本**:如`configure`,这是一个自动化脚本,用于检测系统环境并创建合适的Makefile来编译Flex。 4. *...
《New.Riders.Effortless.Flex.4.Development.Jun.2010》是一部专注于Adobe Flex 4开发的教程书籍,旨在帮助开发者轻松掌握Flex 4的应用开发技术。Flex是一个开源框架,用于构建富互联网应用程序(Rich Internet ...
《Flex 4 Cookbook May 2010...书中包含的Oreilly.Flex.4.Cookbook.May.2010.pdf文件,正是这个宝贵知识库的电子版,值得你深入研究。同时,DSC00316.JPG可能是书中的插图或示例截图,有助于更好地理解和应用书中内容。
### Flex4 Spark皮肤详细制作讲解 #### 一、引言 在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的...
Flex.3.Language.Reference.cn.zip是一个压缩包,包含了Flex 3.0的中文版开发文档,这份文档详尽地阐述了Flex 3.0框架的API,是开发者学习和查询Flex编程的重要参考资料。Flex是一个用于构建富互联网应用程序(RIA)...
根据提供的文件信息,本书《Manning.Flex.4.in.Action》是关于Adobe Flex技术的一本详尽指南。Flex是一个用于构建跨浏览器、跨平台的富互联网应用(RIA)的开源框架。本书作为Flex 3 in Action的修订版,对Flex 4...
这个“flash_flex.rar_flex”压缩包中的文档“flash_flex.doc”似乎包含了关于AS3和Flex开发的一百条实用知识点。让我们详细探讨这些关键概念和技巧。 1. **ActionScript 3**:AS3是Flash平台的主要编程语言,相比...
flex3需要用到的flex.war即是lcds.war,现提供下载! flex.war=lcds.war 此版本为Adobe® LiveCycle® Data Services ES Version 2.6.1
《Flex.3.A.Beginners.Guide》是一本面向初学者的指南,旨在帮助读者快速掌握Adobe Flex 3这一强大的富互联网应用程序(RIA)开发框架。Flex 3是用于构建交互式、高性能的Web应用的开源工具,它基于ActionScript 3.0...
2. **Spark组件库**:Flex 4引入了全新的Spark组件库,相比以前的 Halo组件,提供了更多的自定义和样式化选项。读者将学习如何使用Spark组件创建现代、响应式的用户界面,并掌握组件的生命周期和事件处理。 3. **...
2. **Flex组件**:讲解了Flex组件库中的各种UI组件,如按钮、文本框、数据网格等,以及如何自定义组件以满足特定需求。 3. **数据绑定和事件处理**:解释了Flex中的数据绑定机制,使得UI元素与后台数据模型能够实时...
根据提供的文件信息,“Flex.txt体验”这一主题似乎与Adobe Flex技术相关。Adobe Flex是一个开源框架,用于构建跨平台的桌面及Web应用程序。虽然提供的信息较为有限,但我们可以围绕Adobe Flex技术进行深入探讨,并...
这个压缩包中的"Flex.3.Language.Reference.cn.chm"文件是一个CHM(Compiled HTML Help)格式的帮助文档,包含了Flex 3编程语言的所有关键知识点。 1. **Flex SDK**:Flex SDK是开发Flex应用程序的基础,它包括了...
13. **组件和模块**:Flex组件库的使用,以及模块化开发的优势。 14. **服务和数据访问**:与服务器通信的机制,如RemoteObject、WebService、HTTPService等,以及数据绑定和数据模型。 《Adobe Flex 4 Language ...