Flex 扩展combobox 实现复选功能
前段时间,老大召唤,给个任务,研究一下flex的combobox控件 实现复选功能(flex自带的combobox控件不可以复选),小兵能力有限,哪里可以扩展呀,网上看了别人写的,发现总是有点瑕疵(关键是还没有注释这个是最蛋疼的):
1.静态数据源正常,动态数据源 第一次点击时 没有取到数据,下拉列表为空。
2. ROLL_OVER ROLL_OUT 监听混乱,选择一项后下拉框突然收缩了,或者选择几项下拉框突然收缩了。
3.返回值有误,显示选中的项 与 实际返回选中的项不符
分析:
ROLL_OVER 与 ROLL_OUT 区别:
ROLL_OVER:就是鼠标从外部移入该组件才调用, ROLL_OUT 就是鼠标移到该组件外部才调用
另外 其他两个:MOUSE_OVER 与MOUSE_OUT 区别类似
ROLL_* 与MOUSE_* 的区别是:
MOUSE_*:鼠标 进入/移 出该组件时会调度MOUSE_*事件,即使是从其子组件移到该组件依然会触发该事件
ROLL_* :鼠标从不是其子组件的其余组件中进入该组件时会调度ROLL_*事件
下面是扩展后的代码,修复了上面提到的瑕疵:
必要部分已经加上了注释
MultipleComboBox.cs
package common
{
import flash.events.Event;
import flash.events.MouseEvent; import mx.collections.ArrayCollection;
import mx.controls.ComboBox;
import mx.core.ClassFactory;
import mx.events.FlexEvent;
import mx.events.ListEvent; public class MultipleComboBox extends ComboBox{
private var mouseOut:Boolean=false;
[Bindable]
private var promptText:String=""; //复选框收缩后显示label的值
private var selArr:Array=[]; //复选框选中值集合
private var splitStr:String="/"; //选中多个值 以此分割
public function MultipleComboBox(){
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE,onCreateCompleteHandle);
//多选ComboBox 内嵌CheckBox实现
this.itemRenderer=new ClassFactory(CheckBoxItemRenderer);
}
private function onCreateCompleteHandle(event:FlexEvent):void{
dropdown.allowMultipleSelection=true;
close();
//
mouseOut=false; //置为false
}
//监听鼠标一入一出
private function initListener():void{
if(!dropdown.hasEventListener(MouseEvent.ROLL_OVER))
dropdown.addEventListener(MouseEvent.ROLL_OVER,onRollOverHandle);
if(!dropdown.hasEventListener(MouseEvent.ROLL_OUT))
dropdown.addEventListener(MouseEvent.ROLL_OUT,onRollOutHandle);
}
private function onRollOverHandle(event:MouseEvent):void{
mouseOut=false;
}
private var changeEvent:ListEvent;
//ROLL_OUT 更改选中值集合
private function onRollOutHandle(event:MouseEvent):void{
var list:ArrayCollection=ArrayCollection(this.dataProvider);
mouseOut=true;
var selectedStr:String = ""; //复选框收缩后的label,此处以"/"分割显示选中的值
selArr=[];//每次清空selArr保存的值
for each(var obj:Object in list) //遍历数据源,向selArr数组添加状态selected=true(选中)的值
{
if(obj.selected){
selectedStr += obj.Code+this.splitStr;
selArr.push(obj);
}
}
this.selectedItems=selArr;
this.promptText = selectedStr.substring(,selectedStr.length -) ; close(); //鼠标移出 收缩
//
mouseOut=false; //置为false changeEvent= new ListEvent( ListEvent.CHANGE )
dispatchEvent( changeEvent);
trace(this.text);
}
//ComboBox 带有selectedItems属性 但只实现selectedItem,此处实现selectedItems
public function set selectedItems(value:Array):void{
if (dropdown){
dropdown.selectedItems=value;
}
this.selArr=value;
} [Bindable("change")]
public function get selectedItems():Array{
return selArr;
}
override public function close(trigger:Event=null):void{
//initListener();
if (mouseOut){
super.close(trigger);
}
this.textInput.text=promptText;
this.toolTip = promptText;
initListener();//此处需要从上面注释处调整到这里,
//因为 CheckBoxItemRender中的 this.addEventListener(Event.CHANGE,onClickCheckBox)监听导致
//基数次单击时mouseOut=true; 直接下拉框收缩
}
override public function set prompt(value:String):void{
promptText=value;
}
public function set split(value:String):void
{
this.splitStr=value;
}
public function get split():String
{
return splitStr;
}
}
}
CheckBoxItemRenderer.cs:
package common
{
import flash.events.Event; import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
import mx.controls.List;
import mx.utils.ArrayUtil; import configuration.FormatConfig; public class CheckBoxItemRenderer extends CheckBox{ /**存储当前列数据对象**/
private var currData:Object; public function CheckBoxItemRenderer(){
super();
this.addEventListener(Event.CHANGE,onClickCheckBox);
} override public function set data(value:Object):void{
if(value !=null)
{
this.selected = value.selected;
this.currData = value;
//此处CheckBox label显示code+name 可根据需要置
this.label=value.Code+" "+value.Name;
}
else
{
this.label=null;
}
}
//此属性可设置 数据源任意一项不可选 (enabled)
override public function set enabled(value:Boolean):void{ //
if(currData){
value=currData.enabled==false?false:true;
}
super.enabled=value;
}
/*更改被选中项的状态selected=true*/
private function onClickCheckBox(e:Event):void{
var list:ArrayCollection=ArrayCollection(List(this.parent.parent).dataProvider);//获取数据源
for each(var obj:Object in list)
{
//label的值为数据源中code + name 拼接的 所以此处判断某一项是否被选中的条件看上去有点怪
if((obj.Code+" "+obj.Name)==this.label){
if(this.selected){
obj.selected=true; //选中状态selected=true
}else{
obj.selected=false; //为选好
}
//break;
}
}
}
}
}
由于扩展的不够通用,所以使用的时候稍微做点处理
应用 Temp.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="common.*"
creationComplete="module_creationCompleteHandler(event)"
xmlns:mywebservice="services.mywebservice.*">
<fx:Script>
<![CDATA[
import mx.rpc.soap.WebService;
import spark.components.Scroller;
import spark.components.VScrollBar;
import spark.events.IndexChangeEvent; [Bindable]
private var datacbbSource:ArrayCollection; private function ShowSelectItems2():void{
info2.text="";
info2.text+="选中了 "+myCombox2.selectedItems.length+" 个选项!\n";
for each(var item:Object in myCombox2.selectedItems){
info2.text+=ObjectUtil.toString(item)+"\n";
}
} var num=;
private function module_creationCompleteHandler(event:FlexEvent):void
{
GetDataResult.token = mywebservice.GetData(); //获取数据源
} [Bindable]
private var dataGrideSource:ArrayCollection; protected function GetAllShopsResult_resultHandler(event:ResultEvent):void
{
// TODO Auto-generated method stub
var result:ArrayCollection=event.result as ArrayCollection;
if (result == null || result.length == )
{
return;
}
this.datacbbSource=new ArrayCollection();
for each(var item in result)
{
datacbbSource.addItem({Code:item.Code,Name:item.Name,selected:false});
}
} ]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="GetDataResult" result="GetDataResult_resultHandler(event)" />
<shopservice:MyWebService id="mywebService" />
</fx:Declarations>
<s:VGroup width="100%" height="100%" paddingLeft="" paddingRight="" paddingBottom="" paddingTop="">
<s:HGroup width="100%" color="black" verticalAlign="middle" height="">
<common:MultipleComboBox width="" id="myCombox2" split=";"
prompt="请选择" >
<s:ArrayCollection list="{datacbbSource}"/>
</common:MultipleComboBox>
<mx:Text id="info2"/>
<s:Button label="点击查看选择数据" click="ShowSelectItems2()"/>
</s:HGroup>
</s:VGroup>
</mx:Module >
运行结果就不上图了,下面这段
for each(var item in result)
{
datacbbSource.addItem({Code:item.Code,Name:item.Name,selected:false});
}
对数据源做了处理,强制转换成含有Code,Name,selected(默认值false)三个属性的对象,因为在CheckBoxItemRenderer.cs 和MultipleComboBox.cs文件中使用到的参数直接使用到了Code,Name,selected属性。
最后虽然最终这个没有应用到项目中,为了以后用到时方便,记录一下。
继续充电中。。。。
扩展代码参考:http://liu-yi126.iteye.com/blog/1305494
Flex 扩展combobox 实现复选功能的更多相关文章
- QT 创建一个具有复选功能的下拉列表控件
最近研究了好多东西,前两天突然想做一个具有复选功能的下拉列表框.然后在网上"学习"了很久之后,终于发现了一个可以用的,特地发出来记录一下. 一.第一步肯定是先创建一个PROJECT ...
- QComboBox实现复选功能(三种方法:嵌套QListWidget, 设置QStandardItemModel, 设置Delegate)
今天介绍一下一个小东西 — 如何让QComboBox实现复选功能? 需求: 下拉列表有复选功能 不可编辑 显示所有选中项 关于QComboBox的复选功能有几种方案: QStandardIte ...
- QComboBox实现复选功能
需求: 下拉列表有复选功能 不可编辑 显示所有选中项 关于QComboBox的复选功能有几种方案: QStandardItemModel + QStandardItem QListWidget + ...
- duilib 修复CTreeViewUI复选功能判断不准确的bug
转载请说明出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42265209 CTreeViewUI里面自带了复选的功能,但是复选功能存在 ...
- 在QComboBox的基础上实现复选功能
这个是最近的一个项目上需要实现的功能.要求如下: 下拉列表的项目可以多选 显示框不能编辑 所选中的项目在显示框中出现 下面根据网上的提示代码(参照博客 一去二三里),主要实现如下代码(与参照略有不同) ...
- combobox添加复选框
问题: 需求提出要做一个下拉框可以多选的 解决方案: //机构树 function initOrgTree() { $('#reportOrg').combobox({ width: 200, edi ...
- 为DataGridView控件实现复选功能
实现效果: 知识运用: DataGridViewCheckBoxColumn类 实现代码: private class Fruit { public int Price { get; set; } p ...
- 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
- Qt之QTableView添加复选框(QAbstractTableModel)
简述 使用QTableView,经常会遇到复选框,要实现一个好的复选框,除了常规的功能外,还应注意以下几点: 三态:不选/半选/全选 自定义风格(样式) 下面我们介绍一下常见的实现方式: 编辑委托. ...
随机推荐
- How to resolve the SQL error “cannot connect to WMI provider”
当你试图打开SQL Server Configuation Manager时发现如下错误: “cannot connect to WMI provider. You do not have permi ...
- linux服务器伪分布模式安装hadoop-1.1.2
1:环境准备 1台linux服务器, hadoop安装包(apache官方网下载) jdk1.6+ 2:安装jdk ,配置好环境变量(etc/profile),java -version 测 ...
- 0301——SearchController
创建显示的页面 SearchViewController * searchVC = [[SearchViewController alloc]init]; 告诉搜索控制器将结果显示在创建的页面上 se ...
- Spring中的WebDataBinder浅析
Spring可以自动封装Bean,也就是说可以前台通过SpringMVC传递过来的属性值会自动对应到对象中的属性并封装成javaBean,但是只能是基本数据类型(int,String等).如果传递过来 ...
- 混入模式(max-in)实现继承
混入模式并不是一种复制完整的对象,而是从多个对象中复制出任意的成员并将这些成员组合成一个新的对象. 实现如下: function mix(){ var arg,prop,child = {}; for ...
- 设置Toast显示位置
设置Toast显示位置 两个方法可以设置显示位置: 方法一:setGravity(int gravity, int xOffset, int yOffset)三个参数分别表示(起点位置,水平向右位移, ...
- 浅析Javascript原型继承(转)
引自: http://blog.csdn.net/kittyjie/article/details/4380918 原作者解释的浅显易懂,非常不错的JavaScript prototype总结 JS没 ...
- Front end workflow
标签:请叫我红领巾 记一哈记一哈 ^_^ 推荐个不错的群 自己刚开始折腾的时候也是无处下手,渺茫啊.然而我是有一个很好的前端群(真的很棒,欢迎加入:[375042952]),关注群里的每一次讨论,每一 ...
- 使用 JUnit 进行单元测试 - 教程
tanyuanji@126.com 版本历史 JUnit 该教程主要讲解 JUnit 4.x 版本的使用,以及如何在Eclipse IDE 中如何使用JUnit 目录 tanyuanji@126. ...
- 收集点小文,讲CGI,FASTCGI,PHP-CGI,PHP-FPM之间通透点的文章
http://blog.csdn.net/meegomeego/article/details/36180343 http://www.opsers.org/linux-home/server/php ...