`
hje
  • 浏览: 288158 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

flex tree 中渲染checkBox

阅读更多
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 + Checkbox级联勾选"是一个重要的功能点,通常出现在数据管理、配置界面或文件管理系统中,允许用户进行批量选择或级联操作。 首先,我们来详细了解一下Flex Tree。Flex Tree是基于Adobe Flex技术的一种...

    flex 中tree渲染checkbox

    本文将深入探讨如何在Flex中的Tree组件中渲染复选框,并支持多选。 一、Tree组件与Checkbox的结合 在Flex中,Tree组件默认并不直接支持显示复选框。为了实现这个功能,我们需要自定义TreeItemRenderer类。这个类将...

    flex中tree和checkbox结合使用的插件

    在Flex开发中,Tree组件和Checkbox控件的结合使用是一个常见的需求,特别是在构建具有层级结构并需要用户进行多选操作的界面时。本插件专为此目的设计,它允许用户在树形结构中通过复选框来选择或取消选择节点,从而...

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    flex Tree 复选框。

    TreeItemRenderer是用于渲染Tree组件中每个节点的类,我们可以在此类中添加一个CheckBox控件,并根据节点的状态来控制它的选中状态。以下是一个基本的自定义TreeItemRenderer的代码片段: ```actionscript public ...

    flex Tree checkbox 修改过后的

    在Flex中,为了增加更多的交互性,我们有时需要在Tree的每个节点前添加复选框(checkbox),这使得用户能够进行多选操作。标题提到的“flex Tree checkbox 修改过后”,意味着原生的Flex Tree控件已经进行了自定义...

    Flex4的Tree控件加CheckBox

    在这个场景中,我们关注的是如何在Flex4的Tree控件中添加CheckBox,以便用户可以多选树形结构中的节点。 Tree控件在Flex中用于展示层次结构的数据,它允许用户展开和折叠节点,查看和导航数据结构。在很多情况下,...

    CheckBoxTree.zip

    综上所述,`CheckBoxTree.zip`中的项目涉及到了Flex中的数据绑定、自定义渲染器、事件处理和组件配置等多个核心知识点。通过这些技术,开发者能够创建出具有复选功能的交互式树形控件,以满足用户在选择和操作数据时...

    构造flex3.5的带复选框的树(CheckBoxTree)

    在Flex 3.5开发中,我们经常遇到需要创建具有交互性和可视复杂性的用户界面,其中一个常见的需求就是构建一个带有复选框的树形结构,也就是所谓的“复选框树”(CheckBoxTree)。这样的控件允许用户通过复选框来选择或...

    flex checkbox tree

    Flex Tree组件是一个常用的UI元素,用于展示层级数据,而“flex checkbox tree”则是对Flex Tree的一种扩展,它增加了复选框功能,使得用户可以方便地选择树形结构中的各个节点。本文将详细介绍如何创建一个带复选框...

    flex advancedDataGrid 中如何实现带checkbox的树

    由于我们使用了自定义的渲染器,所以需要监听`change`事件来更新数据源中的选中状态。在上述`<mx:Component>`中,我们在CheckBox的`change`事件中更新了`data.selected`。 6. **扩展功能**: 除了基本的复选框...

    flex checkboxtree 和可增加面板,可关闭的tab页

    `CheckboxTree`和可添加/关闭的`TabPanel`是Flex中常见的组件,用于提供用户友好的交互界面。这篇博客文章《flex checkboxtree 和可增加面板,可关闭的tab页》可能详细讲解了如何在Flex应用中实现这两个功能。 `...

    Flex Checkbox Tree

    【Flex Checkbox Tree】是一种在Adobe Flex开发环境中实现的交互式组件,它将树形结构的数据与复选框相结合,提供了一种用户友好的方式来选择或取消选择树节点。这个组件通常用于数据筛选、配置设置或者层级关系的...

    CheckBoxTree

    Flex中的Tree组件可以自定义项渲染器,以便展示复选框和其他定制的UI元素。 2. **CheckBox组件**:每个树节点通常包含一个复选框,用户可以通过点击复选框来选择或取消选择节点。在Flex中,这通常通过创建自定义的...

    Flex combox

    1. **创建自定义TreeItemRenderer**:在Flex中,我们可以为Tree组件的每个节点定义自定义的渲染器。在这里,我们需要创建一个自定义的ItemRenderer类,该类扩展了默认的TreeItemRenderer,并在其内部添加一个...

    树列表源码

    4. **渲染逻辑**:在渲染过程中,`CheckBoxTree`需要根据数据模型中的`selected`属性来决定复选框的状态。这通常在`set data()`方法中完成。 5. **样式定制**:为了改变复选框的外观或者整个组件的风格,我们可以...

    flex_教程.doc

    REPEATER组件是非可视控件,类似于编程语言中的循环结构,可以在运行时重复渲染指定的组件。这对于动态生成列表或网格等元素非常有用,可以显著提高代码的复用性和灵活性。 通过以上介绍,我们可以看到Flex不仅提供...

    flex3+component组件.pdf

    使用ActionScript 3(AS3)编写组件皮肤是Flex开发中的一个高级话题,涉及到组件生命周期、视觉设计、用户交互等多个方面的深入理解。组件生命周期包括组件的创建、初始化、状态变化、渲染以及销毁等重要时刻,...

    一些不错的开源Flex项目.txt

    #### 十一、CheckboxTree Carousel - **网址**:http://giles.roadnight.name/components.cfm - **简介**:一个结合了复选框和树形结构的组件,用于复杂的数据选择场景。 - **特点**: - 复选功能:允许用户多选或...

Global site tag (gtag.js) - Google Analytics