注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

可多选的ComboBox(Support MultipleSelection)  

2008-11-26 16:07:36|  分类: Flex 组件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

[注:转载自http://blog.comtaste.com/2008/09/extending_the_combobox_to_impl.html]

当ComboBox需要能多项选择的时候,问题就来了。不过不用着急,我们可以轻易的扩展ComboBox来达到这样的目的。最关键的是ComboBox的一个属性allowMultipleSelection要设置成true。

可多选的ComboBox(Support MultipleSelection) - 阿蔡 - 古越之地

上面的这个例子需要用户按着CTRL键才能实现多项选择。实际上更加强大点我们可以在每个选项前面加个CheckBox,不过这个工作量就稍微大一些了。

直接来看例子代码:

//ComboBoxs.as

package

{

import flash.events.Event;

import flash.events.KeyboardEvent;

 

 

import mx.controls.ComboBox;

import mx.events.FlexEvent;

import mx.events.ListEvent;

 

public class ComboBoxs extends ComboBox

 

{

private var ctrlKey:Boolean = false;

 

public function ComboBoxs()

 

{

super();

}

 

override public function close(trigger:Event=null) : void

 

{

if ( !ctrlKey )

super.close( trigger );

 

}

 

override protected function keyDownHandler(event:KeyboardEvent) : void

 

{

super.keyDownHandler( event );

 

ctrlKey = event.ctrlKey;

 

 

if ( ctrlKey )

dropdown.allowMultipleSelection = true;

 

}

 

override protected function keyUpHandler(event:KeyboardEvent) : void

 

{

super.keyUpHandler( event );

 

ctrlKey = event.ctrlKey;

 

if ( !ctrlKey )

{

close();

var changeEvent:ListEvent = new ListEvent( ListEvent.CHANGE )

 

dispatchEvent( changeEvent );

}

}

 

public function set selectedItems( value:Array ) : void

 

{

if ( dropdown )

dropdown.selectedItems = value;

 

}

 

[Bindable("change")]

public function get selectedItems( ) : Array

 

{

if ( dropdown )

return dropdown.selectedItems;

 

else

return null;

}

 

public function set selectedIndices( value:Array ) : void

 

{

if ( dropdown )

dropdown.selectedIndices = value;

 

}

 

[Bindable("change")]

public function get selectedIndices( ) : Array

 

{

if ( dropdown )

return dropdown.selectedIndices;

 

else

return null;

}

 

}

}

 

//使用例子sample.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*" backgroundColor="#FFFFFF">

      <mx:Script>

            <![CDATA[

                  import mx.collections.XMLListCollection;

                  private var list:XML = <root><item label='item1'/><item label='item2'/><item label='item3'/>

                                                            <item label='item4'/><item label='item5'/></root>;

                 

                  [Bindable]

                  private var dp:XMLListCollection = new XMLListCollection(list.item);

                 

                  private function changeHandler():void{

                        var text:String = "Selected items: ";

                        var selected:Array = box.selectedItems as Array;

                        for each( var item in selected){

                              text += " "+item.@label;

                        }

                        textShow.text = text;

                  }

            ]]>

      </mx:Script>

      <mx:Panel title="Multiple select ComboBox Sample" width="100%" height="100%">

            <mx:Label text="Please use Ctr+click to select the items"/>

            <local:ComboBoxs id="box" dataProvider="{dp}" labelField="@label" change="changeHandler()"/>

            <mx:Text id="textShow"/>     

      </mx:Panel>

</mx:Application>

----------------------------------------------------

源码下载 例子swf文件下载

  评论这张
 
阅读(3204)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017