`
gaoke
  • 浏览: 86812 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex checkboxlist

    博客分类:
  • Flex
阅读更多
package com.components.checkBoxList
{
    import flash.events.Event;
   
    import mx.collections.ArrayCollection;
    import mx.collections.ICollectionView;
    import mx.collections.IList;
    import mx.collections.ListCollectionView;
    import mx.collections.XMLListCollection;
    import mx.containers.Tile;
    import mx.controls.CheckBox;
    import mx.controls.Alert;
    import mx.core.IUIComponent;
   
    public class CheckBoxList extends Tile
    {               
        protected var collection:ICollectionView;            //显示的数据源
        private var _labelField:String = "label";            //显示的数据字段
        private var _dataField : String = "selected";        //选中的状态
        private var _selectedName : String = "";             //设置选中的值
        private var _splitString : String = "、";            //设置选中值的分割符
        private var _checkBoxNum:Number = 10;                //设置显示的复选框个数
        private var cellWidth:Number;
        private var cellHeight:Number;
       
       
        public function CheckBoxList()
        {
            super();
        }
       
        //数据源
        [Bindable("collectionChanged")]
        public function get dataProvider():Object
        {
            return collection;
        }
        public function set dataProvider(value:Object):void
        {
            if (value is Array)
            {
                collection = new ArrayCollection(value as Array);
            }
            else if (value is ICollectionView)
            {
                collection = ICollectionView(value);
            }
            else if (value is IList)
            {
                collection = new ListCollectionView(IList(value));
            }
            else if (value is XMLList)
            {
                collection = new XMLListCollection(value as XMLList);
            }
            else
            {
                // convert it to an array containing this one item
                var tmp:Array = [value];
                collection = new ArrayCollection(tmp);
            }           
           
            dispatchEvent(new Event("collectionChanged"));
            addOrResetChildren();
        }
       
        //显示字段
        [Bindable("labelFieldChanged")]
        public function get labelField():String
        {
            return _labelField;
        }
        public function set labelField(value:String):void
        {
            _labelField = value;
            dispatchEvent(new Event("labelFieldChanged"));
        }
       
        //设定选中的状态
        [Bindable("dataFieldChanged")]
        public function get dataField() : String
        {
            return _dataField;
        }
        public function set dataField(value : String) : void
        {
            _dataField = value;
            dispatchEvent(new Event("dataFieldChanged"));
        }
       
        //设定选中的值
        [Bindable("selectedNameChanged")]
        public function get selectedName() : String
        {
            var value : String = "";
            var splitStr:String = "";
            for each (var obj : Object in this.getChildren())
            {
                if(obj[dataField] == true)
                {
                    value += splitStr + obj[labelField] ;
                    splitStr = _splitString;
                }
            }
            return value;
        }
        public function set selectedName(value:String) : void
        {
            if(value != null && value != "")
            {
              var selectedNames:Array = value.split(this.splitString);
              for each(var label:String in selectedNames)
              {
               for each(var object:Object in this.getChildren())
               {
                if(object[labelField] == label)
                {
                 object[dataField] = "selected";
                }
               }
              }
            }
            dispatchEvent(new Event("selectedNameChanged"));
        }
       
        //显示的复选框个数
        [Bindable("checkBoxNumChanged")]
        public function get checkBoxNum():Number
        {
        return this._checkBoxNum;
        }
        public function set checkBoxNum(value : Number):void
        {
        this._checkBoxNum = value;
        dispatchEvent(new Event("checkBoxNumChanged"));
        }
       
        //设定分割符
        [Bindable("splitStringChanged")]
        public function get splitString() : String
        {
            return _splitString;   
        }
        public function set splitString(value : String) : void
        {
            _splitString = value;
            dispatchEvent(new Event("splitStringChanged"));
        }
       
        //新增或重置子列表
        public function addOrResetChildren() : void
        {
            this.removeAllChildren();
            if(collection == null) return;
            for (var i : int =0; i < collection.length; i++)
            {
            var cb : CheckBox = new CheckBox();
           
            cb.id = collection[i].id;
                cb.selected= collection[i][dataField]=="true" ? true : false;
                cb.label = collection[i][labelField];  
                cb.setStyle("color","#333333");
                cb.setStyle("textRollOverColor","#333333");
                cb.setStyle("textSelectedColor","#333333");
                cb.setStyle("fontSize","12");
                cb.setStyle("fontFamily","宋体");
               
                addChild(cb);
            }
        }
       
        //拿到当前选中的checkBox的Id
        public function getSelectedIds() : Array
        {
            var arr : Array = new Array();
            for each (var obj : Object in this.getChildren())
            {
                if(obj.selected == true)
                {
                    arr.push(obj.id);
                }
            }
            return arr;
        }
       
        //显示格式
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            findCellSize();
           
            if(numChildren<=0) return ;  
            var horizontalGap:Number = getStyle("horizontalGap");
            var verticalGap:Number = getStyle("verticalGap");
            this.width = cellWidth + 20; //只显示一列,如果dataProvider的length大于显示的checkBox数量会出现滚动条,这里预留出滚动条的宽度20象素
            this.height = (cellHeight + verticalGap) * _checkBoxNum;
//            var num : Number = Math.floor(width / (cellWidth + horizontalGap) );
//            height = Math.ceil((cellHeight + verticalGap) * Math.ceil(numChildren/num));           
        }

        private function findCellSize():void
        {
            // If user explicitly supplied both a tileWidth and
            // a tileHeight, then use those values.
            var widthSpecified:Boolean = !isNaN(tileWidth);
            var heightSpecified:Boolean = !isNaN(tileHeight);
            if (widthSpecified && heightSpecified)
            {
                cellWidth = tileWidth;
                cellHeight = tileHeight;
                return;
            }
   
            // Reset the max child width and height
            var maxChildWidth:Number = 0;
            var maxChildHeight:Number = 0;
           
            // Loop over the children to find the max child width and height.
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var child:IUIComponent = IUIComponent(getChildAt(i));
   
                if (!child.includeInLayout)
                {
                    continue;
                }
               
                var width:Number = child.getExplicitOrMeasuredWidth();
                if (width > maxChildWidth)
                {
                    maxChildWidth = width;
                }
               
                var height:Number = child.getExplicitOrMeasuredHeight();
                if (height > maxChildHeight)
                {
                    maxChildHeight = height;
                }
            }
           
            // If user explicitly specified either width or height, use the
            // user-supplied value instead of the one we computed.
            cellWidth = widthSpecified ? tileWidth : maxChildWidth;
            cellHeight = heightSpecified ? tileHeight : maxChildHeight;
        }
    }
}
分享到:
评论

相关推荐

    flex4 list全选,反选

    在Flex4中,List组件是用于展示数据列表的常用组件,它可以显示一组可滚动的数据项。在实际应用中,我们经常需要实现对列表中的所有项进行全选或反选的操作,以便用户能快速选择或取消选择全部内容。本文将详细探讨...

    Flex带CheckBox的多选 列表和表格

    在`CheckBoxList.as`中,你可以看到如何自定义`List`的行为,例如设置CheckBox的样式、监听CheckBox的状态改变等。这通常涉及到对`itemRenderer`属性的设置,`itemRenderer`是决定列表项如何显示的组件。 接着,`...

    flex3 带CheckBox的List

    在本文中,我们将深入探讨如何在Flex 3中创建一个带有CheckBox的List组件。Flex 3是Adobe Flex框架的一个早期版本,它允许开发者构建富互联网应用程序(RIA)。List组件是Flex中常用的一种显示数据列表的控件,而...

    flex实现 ComboBox中下拉checkbox

    本文将深入探讨如何在Flex中的ComboBox实现下拉列表中包含Checkbox的功能,并结合移动面板和可调整大小的面板实例,为你提供一个完整的解决方案。 首先,我们要理解Flex中的ComboBox组件。ComboBox继承自ListBase类...

    flex advancedDataGrid 中如何实现带checkbox的树

    HierarchicalData是Flex中用于处理树状数据的类,它接受一个Array或XMLList作为数据源,其中每个元素代表树的一个节点。 2. **定义数据模型**: 每个节点的数据对象应包含一个表示复选状态的属性,例如`selected`...

    flex combox和checkbox总结

    ### Flex ComboBox 和 CheckBox 的使用详解 #### 一、Flex ComboBox 的使用 在 Flex 开发中,`ComboBox` 控件是一个非常实用的控件,它结合了文本框与下拉列表的功能,用户可以在文本框中输入内容,也可以通过下拉...

    《Flex_help》,Flex中文帮助

    3. **Flex组件**:Flex提供了一整套丰富的组件库,如Button、CheckBox、RadioButton、TextInput、TextArea、List、DataGrid等,这些组件可以快速构建出交互性强的用户界面。每个组件都有其特定的属性和事件,通过...

    FLEX带复选框LIST

    标题中的"FLEX带复选框LIST"指的是一个Flex应用程序,该程序使用了List组件,并在其项渲染器中添加了复选框,以便用户能够通过视觉标记来选择多个项目。这在数据展示和多选操作中非常常见,例如在配置设置、文件选择...

    怎样在flex的datagrid中运用checkbox

    值得注意的是,以上代码示例基于Flex MX组件库,如果你使用的是Spark组件,如List或AdvancedDataGrid,那么一些API和用法可能会有所不同。不过,基本的思路和实现方式是相似的。在实际开发中,还需要根据具体需求对...

    Flex课程学习(附带源码)

    Button、CheckBox、ColorPicker、DataGrid、DateField、HSlider、HorizontalList、Image、LinkButton Label、List MumericStepper、PopUpButton、ProgressBar、RadioButton、RichTextEditor、Text、TextArea、...

    Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button列、Checkbox列等)

    在"Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button列、Checkbox列等)"这个项目中,我们将深入探讨如何实现ADG的列头筛选,以及如何集成不同类型的列,如ComboBox列、Button列和Checkbox列。 首先,让...

    FLex文档教程

    1. **控件**:包括基于文本的控件(如Label、Text、TextInput、TextArea和RichTextEditor)、基于按钮的控件(如Button、LinkButton、CheckBox、RadioButton和PopupButton)等。这些控件用于实现各种用户交互功能,...

    flex3.0资源1

    5. **Flex Component Kit**:Flex 3.0 包含一个丰富的组件库,如Button、CheckBox、List等,这些组件可以方便地拖放到MXML设计视图中,快速构建用户界面。 6. **Data Binding**:Flex 3.0 引入了强大的数据绑定机制...

    flex + java 初学者 笔记 学习资料

    2. Checkbox:复选框,由文字和状态图标组成,继承自Button。 3. LinkButton:仅显示文字的无边框、无背景的按钮。 4. RadioButton:单选按钮,多个RadioButton需置于RadioButtonGroup内,以控制只有一个选中。 5. ...

    Flex 写的一个combox多选控件

    在Flex中,我们可以扩展mx.controls.CheckBox类,增加必要的属性和方法来满足多选的需求。例如,我们可以添加一个selectedItems数组来存储用户选择的项,同时为每个CheckBox添加事件监听器,以便在用户点击时更新...

    Flex3 RIA开发详解与精深实践

    1. 基本组件:如Button、TextInput、CheckBox等,用于构建基本的用户交互元素。 2. 复杂组件:如Accordion、TabNavigator、Tree等,提供更高级的布局和导航功能。 3. 数据控件:如DataGrid、List等,用于展示和操作...

    Flex3.0学习手册

    - **XMLList类**: 说明了如何使用XMLList类来读取XML数据。 7. **数据绑定** - **绑定表达式**: 介绍了如何使用“{}”表达式进行数据绑定。 - **[Bindable]注解**: 解释了如何使用[Bindable]注解来标记需要绑定...

    flex开发工具的学习.txt

    - **List**:列表控件,支持数据绑定。 - **NumericStepper**:数字步进器,用于数值范围的选择。 - **DateChooser**:日期选择器,支持自定义显示格式。 - **ColorPicker**:颜色选择器。 - **Alert**:用于显示...

    flex_教程.doc

    - **基于按钮的控件**:如Button、LinkButton、CheckBox、RadioButton和PopupButton等。这些控件通常用于触发特定的操作或收集用户的选项选择。 ##### 2. 加入基于列表的控件并获取数据 - **基于列表的控件**:...

Global site tag (gtag.js) - Google Analytics