package render
{
import flash.events.Event;
import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
/**
* 支持CheckBox的TreeItemRenderer
* @author Montage
*/
public class trees extends TreeItemRenderer
{
public function trees()
{
super();
}
/**
* 表示CheckBox控件从data中所取数据的字段
*/
private var _selectedField:String = "selected";
protected var checkBox:CheckBox;
/**
* 构建CheckBox
*/
override protected function createChildren():void
{
super.createChildren();
checkBox = new CheckBox();
addChild( checkBox );
checkBox.addEventListener(Event.CHANGE, changeHandler);
}
/**
* 点击checkbox时,更新dataProvider
* @param event
*/
protected function changeHandler( event:Event ):void
{
if( data && data[_selectedField] != undefined )
{
data[_selectedField] = checkBox.selected;
}
}
/**
* 初始化控件时, 给checkbox赋值
*/
override protected function commitProperties():void
{
super.commitProperties();
trace(data[_selectedField])
if( data && data[_selectedField] != undefined )
{
checkBox.selected = data[_selectedField];
}
else
{
checkBox.selected = false;
}
}
/**
* 重置itemRenderer的宽度
*/
override protected function measure():void
{
super.measure();
measuredWidth += checkBox.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);
}
checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );
label.x = startx + checkBox.getExplicitOrMeasuredWidth();
}
}
}
分享到:
相关推荐
"Flex Tree + Checkbox级联勾选"是一个重要的功能点,通常出现在数据管理、配置界面或文件管理系统中,允许用户进行批量选择或级联操作。 首先,我们来详细了解一下Flex Tree。Flex Tree是基于Adobe Flex技术的一种...
本文将深入探讨如何在Flex中的Tree组件中渲染复选框,并支持多选。 一、Tree组件与Checkbox的结合 在Flex中,Tree组件默认并不直接支持显示复选框。为了实现这个功能,我们需要自定义TreeItemRenderer类。这个类将...
在Flex开发中,Tree组件和Checkbox控件的结合使用是一个常见的需求,特别是在构建具有层级结构并需要用户进行多选操作的界面时。本插件专为此目的设计,它允许用户在树形结构中通过复选框来选择或取消选择节点,从而...
在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...
TreeItemRenderer是用于渲染Tree组件中每个节点的类,我们可以在此类中添加一个CheckBox控件,并根据节点的状态来控制它的选中状态。以下是一个基本的自定义TreeItemRenderer的代码片段: ```actionscript public ...
在Flex中,为了增加更多的交互性,我们有时需要在Tree的每个节点前添加复选框(checkbox),这使得用户能够进行多选操作。标题提到的“flex Tree checkbox 修改过后”,意味着原生的Flex Tree控件已经进行了自定义...
在这个场景中,我们关注的是如何在Flex4的Tree控件中添加CheckBox,以便用户可以多选树形结构中的节点。 Tree控件在Flex中用于展示层次结构的数据,它允许用户展开和折叠节点,查看和导航数据结构。在很多情况下,...
综上所述,`CheckBoxTree.zip`中的项目涉及到了Flex中的数据绑定、自定义渲染器、事件处理和组件配置等多个核心知识点。通过这些技术,开发者能够创建出具有复选功能的交互式树形控件,以满足用户在选择和操作数据时...
在Flex 3.5开发中,我们经常遇到需要创建具有交互性和可视复杂性的用户界面,其中一个常见的需求就是构建一个带有复选框的树形结构,也就是所谓的“复选框树”(CheckBoxTree)。这样的控件允许用户通过复选框来选择或...
Flex Tree组件是一个常用的UI元素,用于展示层级数据,而“flex checkbox tree”则是对Flex Tree的一种扩展,它增加了复选框功能,使得用户可以方便地选择树形结构中的各个节点。本文将详细介绍如何创建一个带复选框...
由于我们使用了自定义的渲染器,所以需要监听`change`事件来更新数据源中的选中状态。在上述`<mx:Component>`中,我们在CheckBox的`change`事件中更新了`data.selected`。 6. **扩展功能**: 除了基本的复选框...
`CheckboxTree`和可添加/关闭的`TabPanel`是Flex中常见的组件,用于提供用户友好的交互界面。这篇博客文章《flex checkboxtree 和可增加面板,可关闭的tab页》可能详细讲解了如何在Flex应用中实现这两个功能。 `...
【Flex Checkbox Tree】是一种在Adobe Flex开发环境中实现的交互式组件,它将树形结构的数据与复选框相结合,提供了一种用户友好的方式来选择或取消选择树节点。这个组件通常用于数据筛选、配置设置或者层级关系的...
Flex中的Tree组件可以自定义项渲染器,以便展示复选框和其他定制的UI元素。 2. **CheckBox组件**:每个树节点通常包含一个复选框,用户可以通过点击复选框来选择或取消选择节点。在Flex中,这通常通过创建自定义的...
1. **创建自定义TreeItemRenderer**:在Flex中,我们可以为Tree组件的每个节点定义自定义的渲染器。在这里,我们需要创建一个自定义的ItemRenderer类,该类扩展了默认的TreeItemRenderer,并在其内部添加一个...
4. **渲染逻辑**:在渲染过程中,`CheckBoxTree`需要根据数据模型中的`selected`属性来决定复选框的状态。这通常在`set data()`方法中完成。 5. **样式定制**:为了改变复选框的外观或者整个组件的风格,我们可以...
REPEATER组件是非可视控件,类似于编程语言中的循环结构,可以在运行时重复渲染指定的组件。这对于动态生成列表或网格等元素非常有用,可以显著提高代码的复用性和灵活性。 通过以上介绍,我们可以看到Flex不仅提供...
使用ActionScript 3(AS3)编写组件皮肤是Flex开发中的一个高级话题,涉及到组件生命周期、视觉设计、用户交互等多个方面的深入理解。组件生命周期包括组件的创建、初始化、状态变化、渲染以及销毁等重要时刻,...
#### 十一、CheckboxTree Carousel - **网址**:http://giles.roadnight.name/components.cfm - **简介**:一个结合了复选框和树形结构的组件,用于复杂的数据选择场景。 - **特点**: - 复选功能:允许用户多选或...