la extension de la clase:
Código :
package com
{
import flash.display.DisplayObject;
import mx.controls.ComboBox;
import mx.controls.List;
import mx.core.ClassFactory;
public class IconComboBox extends ComboBox
{
//create our own factory so we can set the properties before initialized
private var internalDropdownFactory:ClassFactory = new ClassFactory(List);
//holds the icon image for display
private var displayIconObject:Object;
public function IconComboBox():void{
super();
//setup the properties on the factory before init so that
//the drop down will gracefully adopt them.
internalDropdownFactory.properties = { iconField:"",iconFunction:null };
dropdownFactory = internalDropdownFactory;
}
/**
* store the icon field
**/
private var _iconField:String="icon";
[Bindable]
public function set iconField(value:String):void{
_iconField = value;
internalDropdownFactory.properties = {iconField:value};
}
public function get iconField():String{
return _iconField;
}
/**
* store the icon function
**/
private var _iconFunction:Function;
[Bindable]
public function set iconFunction(value:Function):void{
_iconFunction = value;
internalDropdownFactory.properties = {iconFunction:value};
}
public function get iconFunction():Function{
return _iconFunction;
}
/**
* when the index changes so should the icon
**/
override public function set selectedIndex(value:int):void
{
super.selectedIndex = value;
if (value!=-1){
showIcon();
}
}
//set the icon to the selected item
private function showIcon():void
{
var displayIcon:Class = itemToIcon(dataProvider[selectedIndex]);
//remove the previous added object so that a new one can
//be created. I would love to find a way to recycle this
//displayIconObject??
if (getChildByName("displayIconObject"))
{
removeChild(getChildByName("displayIconObject"));
}
//if no icon then return
if (!displayIcon)
{
//move the textinput to 0 as there is no icon
textInput.x=0;
return;
}
//add and size the obejct
displayIconObject = new displayIcon;
displayIconObject.name="displayIconObject";
addChild(DisplayObject(displayIconObject));
// set the x based on corerradius
DisplayObject(displayIconObject).x = getStyle("cornerRadius");
//set the y pos of the icon based on height
DisplayObject(displayIconObject).y = (height-DisplayObject(displayIconObject).height)/2;
//move the textinput to make room for the icon
textInput.x=DisplayObject(displayIconObject).width+getStyle("cornerRadius");
}
/**
* make sure to take into account the icon width
**/
override public function set measuredWidth(value:Number):void
{
super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle("cornerRadius"));
}
/**
* grab the icon based on the data
**/
public function itemToIcon(data:Object):Class
{
if (data == null)
return null;
if (iconFunction != null)
return iconFunction(data);
var iconClass:Class;
var icon:*;
if (data is XML)
{
try
{
if (data[iconField].length() != 0)
{
icon = String(data[iconField]);
if (icon != null)
{
iconClass =
Class(systemManager.getDefinitionByName(icon));
if (iconClass)
return iconClass;
return document[icon];
}
}
}
catch(e:Error)
{
}
}
else if (data is Object)
{
try
{
if (data[iconField] != null)
{
if (data[iconField] is Class)
return data[iconField];
if (data[iconField] is String)
{
iconClass = Class(systemManager.getDefinitionByName(
data[iconField]));
if (iconClass)
return iconClass;
return document[data[iconField]];
}
}
}
catch(e:Error)
{
}
}
return null;
}
}
}
la aplicacion:
Código :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns="com.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
[Embed(source="assets/0001.png")]
public const icon1:Class;
[Embed(source="assets/0002.png")]
public const icon2:Class;
[Embed(source="assets/0003.png")]
public const icon3:Class;
[Embed(source="assets/0004.png")]
public const icon4:Class;
[Bindable]
public var ds:XML = new XML(
<items>
<item label="item number 1" icon="icon1" />
<item label="item number 2" icon="icon2" />
<item label="item number 3" icon="icon3" />
<item label="item number 4" icon="icon4" />
</items>
);
private function geticon(item:Object):Class
{
if (this[item.@icon]){
return this[item.@icon];
}
return null;
}
private function closeHandler(event:Event):void {
myData.text = "Data: " + "h";
}
]]>
</mx:Script>
<mx:Style source="BlueXP.css"/>
<IconComboBox dataProvider="{ds..item}" labelField="@label" iconFunction="geticon" x="10" y="10" />
</mx:Application>
la hoja de estilo:
Código :
Application {
backgroundGradientAlphas: 1,1;
backgroundGradientColors: #DCEBFE,#8EB3E7;
}
TextInput{
borderStyle: "solid";
borderColor: #8EB3E7;
cornerRadius: 3;
focusAlpha: 0.05;
focusFillColors: #FFFFFF,#DCEBFE;
focusFillAlphas: 1,1;
}
ComboBox{
themeColor: #8EB3E7;
borderColor: #8EB3E7;
fontWeight: "normal" ;
focusAlpha: 0.08;
focusFillColors: #FFFFFF,#DCEBFE;
focusFillAlphas: 1,1;
fillAlphas: 1,1,1,1;
fillColors: #FFFFFF,#FFFFFF,#FFFFFF,#DCEBFE;
cornerRadius: 3;
highlightAlphas: 0,0;
}
List{
themeColor: #8eb3e7;
}
el problema es que no logro sacar el data de los itemes elegidos alguien sabe como hacerlo
esta ocupadno esto .selectedItem.data; pero no logro obener el dato del item elegido?
si alguien lo puede sacar se agradece
