flex中带有checkbox复选框的树运用很普遍已经有很多实现,带单选按钮的树很少用到,最近因为设计样式的需要,做了一个单选按钮树,主要还是渲染器的扩展。下面是简单的实现过程
radioTree.mxml代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
<mx:Script>
<![CDATA[
import com.xvxv.aclass.XmlTools;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import com.test.TreeCheckBoxRenderer;
import mx.collections.ArrayCollection;
[Bindable]
public var collection:XMLList = (<datas>
<data id="1" name="一级指标" isLeaf="false" selected="false">
<data id="2" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="3" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="4" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="5" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="6" name="反平衡机组热效率" isLeaf="true" selected="false"/>
</data>
<data id="7" name="二级指标" isLeaf="false" selected="false">
<data id="8" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="9" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="10" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="11" name="反平衡机组热效率" isLeaf="true" selected="false"/>
<data id="12" name="反平衡机组热效率" isLeaf="true" selected="false"/>
</data>
</datas>).data;
private function show():void{
var arr:XMLListCollection = XmlTools.treeListToList(XMLList(tree.dataProvider));
var names:String = "";
for each(var o:XML in arr){
if(o.@selected.toString()=="true")
names =o.@id;
}
Alert.show(names);
}
]]>
</mx:Script>
<mx:Button label="show" click="show()"/>
<mx:Tree id="tree" width="300" height="500" labelField="@name"
itemRenderer="com.test.TreeRadioRenderer" dataProvider="{collection}"/>
</mx:Application>
TreeRadioRenderer.as
package com.test
{
import flash.events.Event;
import mx.controls.Alert;
import mx.controls.RadioButton;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
public class TreeRadioRenderer extends TreeItemRenderer
{
public function TreeRadioRenderer()
{
super();
}
protected var radioButton:RadioButton;
/**
* 构建radioButton
*/
override protected function createChildren():void
{
super.createChildren();
radioButton = new RadioButton();
addChild( radioButton );
radioButton.addEventListener(Event.CHANGE, changeHandler);
}
/**
* 设置节点为不选中状态,因为每次只有一个节点为选中状态,
* 所以在选择节点事件之前设置所有节点为不选中状态
*/
private function setSelectedFalse(xmlList:XMLList):void{
for each(var xml:XML in xmlList){
xml.@selected = false;
if(xml.data){
setSelectedFalse(XMLList(xml.data));
}
}
}
/**
* 点击radioButton时,更新dataProvider
* @param event
*/
protected function changeHandler( event:Event ):void
{
var xmlList:XMLList = XMLList(radioTree(this.parentDocument).collection);
setSelectedFalse(xmlList);
if(data.@isLeaf==true){
if( data && data.@selected != undefined ){
data.@selected = radioButton.selected;
}
}else {
radioButton.selected=false;
// radioButton.enabled = false;
}
// var e:Event = event;
}
/**
* 初始化控件时, 给radioButton赋值
*/
override protected function commitProperties():void
{
super.commitProperties();
if(data.@isLeaf==false){
radioButton.visible=false;
radioButton.enabled = false;
}
if( data && data.@selected != undefined ){
radioButton.selected = getBooleanByString(data.@selected.toString());
}
else {
radioButton.selected = false;
}
}
private function getBooleanByString(valStr:String):Boolean{
return valStr=="true"?true:false;
}
/**
* 重置itemRenderer的宽度
*/
override protected function measure():void
{
super.measure();
measuredWidth += radioButton.getExplicitOrMeasuredWidth();
}
/**
* 重新排列位置, 将label后移
* @param unscaledWidth
* @param unscaledHeight
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var startx:Number = data ? TreeListData( listData ).indent : 0;
if (disclosureIcon)
{
disclosureIcon.x = startx;
startx = disclosureIcon.x + disclosureIcon.width;
disclosureIcon.setActualSize(disclosureIcon.width,
disclosureIcon.height);
disclosureIcon.visible = data ?
TreeListData( listData ).hasChildren :
false;
}
if (icon)
{
icon.x = startx;
startx = icon.x + icon.measuredWidth;
icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
}
radioButton.move(startx, ( unscaledHeight - radioButton.height ) / 2 );
label.x = startx + radioButton.getExplicitOrMeasuredWidth();
}
}
}
运行的结果
- 大小: 24.2 KB
分享到:
相关推荐
"Flexwheel"是基于Flex实现的一种特定组件,主要用于创建图片滚动和时间滚动的效果。这种效果常用于增强用户体验,尤其是在展示大量信息或者产品图片时,能够以吸引人的方式呈现内容。 首先,我们要理解什么是Flex...
在本案例中,"flex实现的翻书功能的网站漂亮的flex实现swf及源码",显然指的是使用Flex技术创建了一个模拟真实书籍翻页效果的交互式Web应用。这个应用不仅提供了视觉上的吸引力,还具有高度的用户参与度,让浏览者...
在这个特定的场景中,"Flex实现的xmpp消息发送接收"是指使用Flex技术来实现在Android、iOS等移动设备以及IE浏览器上的即时通讯功能。 XMPP(Extensible Messaging and Presence Protocol)是一种开放标准的协议,...
在这个"Flex实现的计算器"项目中,开发者使用了Adobe Flex来设计和开发一个基本的计算器,具备进行基本数学运算如加、减、乘、除的功能。 1. **Flex框架介绍** Flex提供了MXML和ActionScript两种编程语言,其中...
本篇文章将详细解释如何使用Flex来实现边框以及添加标题,并重点关注在标题框中显示文本的实现方法。 首先,我们需要了解Flex中的容器和组件。容器是Flex应用程序的基础,它们可以包含一个或多个组件,如按钮、文本...
S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目结合Flex实现登录S2SH项目...
flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果
[上传下载]Asp.net + Flex实现网络硬盘_flex_up.zip源码ASP.NET网站源码打包下载[上传下载]Asp.net + Flex实现网络硬盘_flex_up.zip源码ASP.NET网站源码打包下载[上传下载]Asp.net + Flex实现网络硬盘_flex_up.zip...
一类是给flex容器设置的,一类是给flex子元素设置的,本文在介绍一些典型场景实现的同时也会顺带讲解部分属性,当然更详细的内容可以阅读MDN上的教程。接下来需要使用到flex-grow属性,这个是flex子元素上的属性,...
在本实例中,“flex实现数据表格”指的是使用Flex技术来创建一个数据展示组件,即Datagrid,用于显示结构化的数据。Datagrid是Flex中非常重要的一个组件,它允许用户以表格形式查看和操作大量数据。 Flex Datagrid...
在Flex开发中,创建一个带有复选框的列表树是一种常见的需求,这通常用于实现用户对多级数据的筛选和选择。"Flex实现带复选框的列表树"这一主题涵盖了Flex编程、UI组件设计以及事件处理等多个方面的知识点。下面我们...
flex实现简单浏览器,flex AIR中HTML控件实现了简单的网页浏览效果
这篇博客“Flex实现国际化样例”将指导我们如何在Flex项目中实现这一功能。 在Flex中实现国际化通常涉及以下几个核心概念: 1. **资源文件**:在Flex项目中,我们会创建一系列的资源文件,每个文件对应一种语言。...
在本文中,我们将深入探讨如何使用Flex来实现一个图片旋转效果,这在产品展示或交互式界面设计中非常常见。Flex是一种强大的、基于XML的框架,用于构建富互联网应用程序(RIA),尤其适用于创建动态、响应式的用户...
在Flex中实现打印预览功能可以帮助用户在正式打印前检查文档布局和格式,确保打印效果符合预期。以下是对Flex中实现打印预览功能的详细解释: 一、Flex中的打印服务 Flex内置了`flash.printing.PrintJob`类,提供了...
《基于Java+Flex实现的聊天程序详解》 在信息技术领域,构建实时的在线聊天系统是一项常见的挑战。本项目“基于Java+Flex实现的聊天程序”提供了一种有效的解决方案,它结合了Java的强大后端处理能力和Flex的富...
"Flex万年历记事本"是一个使用Flex技术实现的项目,它结合了日历功能和记事本特性,为用户提供了一种方便的方式来管理和记录日常生活中的事务。 在Flex源码中,我们可以期待看到以下几个关键知识点: 1. **MXML与...
在本文中,我们将深入探讨如何使用Flex技术来实现阴影效果。Flex是一种强大的开发框架,主要用于构建富互联网应用程序(RIA),特别是在Adobe AIR和Flash Player环境中。它提供了丰富的组件库、强大的数据绑定机制...
在标题"flex实现的删除子容器"中,我们关注的核心是使用Flex布局来管理并删除容器内的子元素。下面将详细解释Flex布局的基本概念,以及如何在实践中运用它来删除子容器。 1. **Flex布局基础**: - **容器(Flex ...
Flex实现的朝4个方向翻转的效果,可以扩展实现很多特殊展示效果