Multiselect ComboBox

qmel · 02.08.2011, 20:02

Доброе время суток!

Флекс знаю мало и почти с ним не работаю. Был нужен ComboBox с возможностью выбора нескольких значений, нашел готовый код интернете, например здесь http://blog.comtaste.com/2008/09/ext...x_to_impl.html

Код:

Код AS3:

package
{
	import flash.events.Event;
	import flash.events.KeyboardEvent;
 
	import mx.controls.ComboBox;
	import mx.events.ListEvent;
 
	public class MultiSelectComboBox extends ComboBox
	{
 
		private var ctrlKeyPressed:Boolean = false; //Control Key Pressed
 
		/**
		 * This function checks whether the CtrlKey is pressed.
		 * If CtrlKey is pressed then, 
		 *   						multiple selection is enabled for the ComboBox dropdown.
		 **/
		override protected function keyDownHandler( event:KeyboardEvent ):void
		{
			super.keyDownHandler( event );
 
			this.ctrlKeyPressed = event.ctrlKey;
 
			if( this.ctrlKeyPressed == true ) 
			{
				dropdown.allowMultipleSelection = true;
			}
		}
 
		/**
		 * This function prevents the ComboBox from closing if CtrlKey is pressed
		 * Else it fires a Change event to update selectedItems array on close  
		 * 
		 * If CtrlKey is not pressed then, 
		 * 								ComboBox dropdown is closed and change event is dispatched.
		 * 
		 * 'dropdown' in a ComboBox is a List component
		 **/
		override protected function keyUpHandler( event:KeyboardEvent ):void
		{
			super.keyUpHandler( event );
			this.ctrlKeyPressed = event.ctrlKey;
 
			if ( this.ctrlKeyPressed == false ) 
			{
				this.close(); 
				var changeEvent:ListEvent = new ListEvent( ListEvent.CHANGE );
				this.dispatchEvent( changeEvent );
				this.selectedIndex = -1;
			}			
		}
 
		/**
		 * This function prevents the ComboBox from closing if CtrlKey is pressed on a Close Event
		 **/
		override public function close( trigger:Event=null ):void
		{
			if( this.ctrlKeyPressed == false )
			{
				super.close( trigger );
				this.selectedIndex = -1;
			}
		}
 
 
		/**
		 * 'selectedItems' Setter
		 **/
		public function set selectedItems( value:Array ):void
		{
			if( this.dropdown )
			{
				this.dropdown.selectedItems = value;
			}
		}
 
 
		/**
		 * 'selectedItems' Getter
		 **/
		[Bindable("change")]
		public function get selectedItems( ) : Array
 
		{
			if ( this.dropdown )
				return this.dropdown.selectedItems
			else
				return null;	
		}
 
 
		/**
		 * 'selectedIndices' Setter
		 **/
		public function set selectedIndices( value:Array ) : void
		{
			if ( this.dropdown )
				this.dropdown.selectedIndices = value;
		}
 
 
		/**
		 * 'selectedIndices' Getter
		 **/
		[Bindable("change")]
		public function get selectedIndices( ) : Array
		{
			if ( this.dropdown )
				return this.dropdown.selectedIndices;
			else
				return null;
		}
 
		/**
		 * 'MultiSelectComboBox' constructor
		 **/		
		public function MultiSelectComboBox()
		{
			super();
		}
 
	}
}

Хочется отображать выбранные значения через запятую в Combox-е, как это реализовать?

Нашел вот эти вещи, но не знаю что с ними делать:

Код AS3:

 override public function itemToLabel(item:Object, ...rest):String {
		var label : String = "";
		if( !selectedItems || selectedItems.length) {
		return super.itemToLabel(item);
		} else {
		for each( var object : Object in selectedItems ) {
		label += super.itemToLabel(object) + ", ";
		}
		}
		return label.substring(0,label.length - 2);
		}
 
		override protected function commitProperties():void {
		var label : String = "";
		super.commitProperties();
		for each( var object : Object in selectedItems ) {
		label += super.itemToLabel(object) + ", ";
		}
		textInput.text = label.substring(0,label.length - 2);
		}

Кто знает, подскажите, пожалуйста.

NikolyA · 02.08.2011, 20:08

http://www.blastanova.com/blog/2010/...-dropdownlist/

qmel · 03.08.2011, 12:26

Спасибо, но это совершенно не то что мне нужно. Меня полностью устаивает тот код который я выложил, кроме того, что этот Multiselect Combobox не отображает выбранные элементы через запятую. Я не нашел чтобы это было реализовано в коде по ссылке.

Apikaster · 04.08.2011, 16:38

Могу дать свой ...
Но у меня комбо бокс с чеками ...
и в зависимости что ты хочешь с ними дальше делать ! ...
apikaster@gmail.com
и проверь ...
Не цепляешь ли ты в спарк на ЭмИкс ...
а насчет спарка ....
Думаю можно сделать ...
На спарках много времени не займет ...

qmel · 05.08.2011, 19:54

ничего не понял. код который я выложил рабочий, все ок. едиственное чего мне не хвататет это чтоб при закрытии ComboBox-а в нем отображались выбранные значения через запятую. Кто-нибудь знает как добавить эту фнкциональность?

djyamato · 05.08.2011, 22:14

Цитата:

Сообщение от qmel

ничего не понял. код который я выложил рабочий, все ок. едиственное чего мне не хвататет это чтоб при закрытии ComboBox-а в нем отображались выбранные значения через запятую. Кто-нибудь знает как добавить эту фнкциональность?

комбобокс состоит из таких частей http://help.adobe.com/en_US/FlashPla...kinPartSummary
Написать свой скин для openButton, основывающийся на ComboBoxButtonSkin или дополнить существующий

qmel · 15.08.2011, 11:26

А вы не можете написать подробнее? Я spark никогда не пользовался и мне, к сожалению, это мало о чем говорит.

Добавлено через 9 минут
Может можно как-то попроще сделать, через labelField может? Просто мне срочно нужно, а я не ориентируюсь в этом совсем.

djyamato · 15.08.2011, 16:27

в спарке не нашел как сделать multyselect для дроп дауна, да и ОООЧЕНЬ сомневаюсь что это пряморукий способ, но работает
Заменил в DropDownList группу dataGroup на List компонент (Ой, чую попинают меня щас..., хотя, это даже к лучшему, попинайте и укажите на грубости, пожалуйста)

вот код

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:com="com.*">
 
	<fx:Declarations>
		<s:ArrayCollection id="listDP">
			<fx:Object label="item1"/>
			<fx:Object label="item2"/>
			<fx:Object label="item3"/>
			<fx:Object label="item4"/>
			<fx:Object label="item5"/>
			<fx:Object label="item6"/>
		</s:ArrayCollection>
	</fx:Declarations>
 
	<com:CustomDropDown dataProvider="{listDP}" 
						left="5" 
						right="15" 
						requireSelection="false" 
						skinClass="skins.CustomDropDownSkin"/>
</s:Application>

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<s:DropDownList xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx"
				creationComplete="dropdownlist1_creationCompleteHandler(event)">
	<fx:Metadata>
 
	</fx:Metadata>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			import spark.components.List;
			import spark.events.DropDownEvent;
			import spark.events.IndexChangeEvent;
 
			private var ctrlKeyPressed:Boolean = false; //Control Key Pressed
 
			protected var _selectedIndices:Vector.<int>=new Vector.<int>();
			protected var _list:List;
 
 
			override protected function keyDownHandler( event:KeyboardEvent ):void
			{
				super.keyDownHandler( event );
 
				this.ctrlKeyPressed = event.ctrlKey;
 
				if( this.ctrlKeyPressed == true ) 
				{
					ctrlKeyPressed=true;
				}
			}
			override protected function keyUpHandler(event:KeyboardEvent):void
			{
				ctrlKeyPressed=false;
			}
 
			protected function dropdownlist1_creationCompleteHandler(event:FlexEvent):void
			{
				addEventListener(CustomDropDownListEvent.LIST,listReadyHandler,true);
			}
 
			protected function listReadyHandler(event:CustomDropDownListEvent):void
			{
				_list=event.messageData.data;
				_list.selectedIndices=_selectedIndices;
				_list.addEventListener(Event.CHANGE,listChangeHandler);
			}
 
			protected function listChangeHandler(event:Event):void
			{
				if(ctrlKeyPressed)
				{
					labelDisplay.text="";
					for(var i:int=0;i<_list.selectedIndices.length;i++)
					{
						if(i<_list.selectedIndices.length-1)
						{
							labelDisplay.text+=_list.dataProvider.getItemAt(_list.selectedIndices[i]).label+" , ";
						}
						else
						{
							labelDisplay.text+=_list.dataProvider.getItemAt(_list.selectedIndices[i]).label;
						}
					}
					_selectedIndices=_list.selectedIndices;
				}
 
				else
				{
					_selectedIndices.length=0;
					_selectedIndices.push(_list.selectedIndex);
					labelDisplay.text=_list.dataProvider.getItemAt(_selectedIndices[0]).label;
					closeDropDown(false);
				}
			}
		]]>
	</fx:Script>
</s:DropDownList>

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5"> 
	<fx:Metadata>
		[HostComponent("com.CustomDropDown")]
	</fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[            
			import com.CustomDropDownListEvent;
 
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {return contentFill};
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                if (getStyle("borderVisible") == false)
                {
                    if (border)
                        border.visible = false;
                    if (background)
                    {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                }
                else
                {
                    if (border)
                        border.visible = true;
                    if (background)
                    {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                }
 
                if (dropShadow)
                    dropShadow.visible = getStyle("dropShadowVisible");
 
                openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
 
                if (borderStroke)
                {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
        popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
 
        <s:Group id="dropDown">
            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>
 
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
			<s:List id="list" creationComplete="{dispatchEvent(new CustomDropDownListEvent(CustomDropDownListEvent.LIST,list))}" change="{dispatchEvent(new CustomDropDownListEvent(CustomDropDownListEvent.SELECTION_CHANGE,{index:list.selectedIndex,object:list.selectedItem}))}" selectedIndices="{hostComponent.selectedIndices}" dataProvider="{hostComponent.dataProvider}" allowMultipleSelection="true" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false"/>
        </s:Group>
    </s:PopUpAnchor>
 
    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />  
 
    <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 
 
</s:SparkSkin>

Код AS3:

package com
{
	import flash.events.Event;
 
	public class CustomDropDownListEvent extends Event
	{
 
		public var messageData:Object;
 
		public static const LIST:String="list";
		public static const SELECTION_CHANGE:String="selectionChange";
 
		public function CustomDropDownListEvent(type:String, data:Object=null)
		{
			super(type,data);
			var messObj:Object=new Object();
			messObj.data=data;
			this.messageData=messObj;
		}
	}
}

qmel · 24.08.2011, 12:36

Спасибо Вам djyamato, за помощь! Ваш компонент не использовал, обощелся без мультиселекта. Жаль что никто не пояснил как же все таки правильно сделать такой компонент.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид