Flex 2.0.1 ComboBox with icon support.
April 28, 2007
Sometimes a ComboBox with icons in the list as well as in the text display area can be useful. However the out of the box Flex ComboBox component dosn’t support this. Here is one way of doing it.
Basically I’ve extended the existing ComboBox adding iconField and iconFunction properties. I had to instance my own ClassFactory for the internal list that is used as the dropdown so that I could pre-initialize the required properties. I override the measuredWidth so that I can make room for the icon, and adjust the x position of the internal textInput to compensate.
A little addition to the toolbox that can come in really handy.
Sample and Source : IconComboBox
Enjoy.
Jason Hawryluk
April 29, 2007 at 5:22 pm
When I click view source and it goes to delicious. what’s happening?
April 29, 2007 at 6:50 pm
Seems to be working fine here? Weird.
Anyone else having trouble ?
jason
May 7, 2007 at 3:23 pm
View Source appears to be working fine here. Thanks for the code!
July 5, 2007 at 2:27 pm
[...] Flex 2.0.1 ComboBox with icon support. « Flexible Experiments [...]
August 4, 2007 at 5:08 pm
Source link seems to be not working
August 4, 2007 at 5:19 pm
Seems to be working for me.
Ben, try again, and let me know.
Jason
October 19, 2007 at 9:00 am
Do you have embed the icons? I need to load them dynamically. But it keeps throwing an error in measuredWidth (null object reference)
…
var l:String = element.@nld+” – “+element.@nom;
var ic:String = “images/flags/”+String(element.@nld).toLowerCase()+”.png”; trace(ic);
countryArr[cntr] = {label:l, data:ic};
…
…
November 7, 2007 at 6:11 am
Thanks, very useful
November 9, 2007 at 7:25 am
[...] was off to Google to see if anyone had done this previously. We found this great post on the blog Flexible Experiments explaining how you can create a combo box which supports icons. Of course our designers [...]
November 28, 2007 at 6:33 pm
Viewing source code seems to work OK.
January 25, 2008 at 2:11 am
Jason, this is a terrific piece of code. Do you know if it would be simple to extend the icon to contain an object drawn in Flex as opposed to an image?
February 26, 2008 at 6:20 pm
Hey Jason,
great job! It will be very useful at my project (Teeth chart).
Excellent!
April 29, 2008 at 1:35 pm
Jason,
Thanks for the code. Not specifying icon however throws an error at creation. Your measureWidth shoulb changed to sg like that:
override public function set measuredWidth(value:Number):void
{
if (displayIconObject == null)
super.measuredWidth = value + getStyle(”cornerRadius”);
else
super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle(”cornerRadius”));
}
June 10, 2008 at 6:30 am
Thanks for the code. Its really good
June 10, 2008 at 1:51 pm
Can you share ur source code.
July 4, 2008 at 8:28 am
Thanks for this great code. I also need to programatically load the icons. Basically, I have a folder of xml files representing translations of the user interface (English, French, German, etc). For each xml file, there is an icon file (png) of the flag for that language.
The folder is scanned and all available languages are listed in the combo box. How therefore do I dynamically load the icon too?
i.e. how do I programatically set the icon file to “en_US.png” when programatically creating the drop down list?
Many thanks in advance for any advice you can give!
July 27, 2008 at 10:09 pm
Nick, you need to use the iconFunction.
July 27, 2008 at 10:17 pm
Joeren, If you have 100 images and you need to toggle between them…then you have to load/embed all 100 images..then use an IconFunction and provide to the IconComboBox. Then change the icon field for each the object in your iconcombobox.dataProvider.
Also make this change in the IconCombobox.as (courtesy of Glinto see previous posting)
override public function set measuredWidth(value:Number):void
{
if (displayIconObject)
super.measuredWidth = value + getStyle(”cornerRadius”);
else
super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle(”cornerRadius”));
}
July 27, 2008 at 10:23 pm
In my posting above,by this line –>”Then change the icon field for each the object in your iconcombobox.dataProvider” —
I meant programmatically based on what image you want to see for each ITEM, change the @icon property of each of the iconcombobox.dataprovider.object
August 4, 2008 at 4:15 pm
What is the following code doing? How can it return a class from just text?
if (data[iconField].length() != 0)
{
icon = String(data[iconField]);
if (icon != null)
{
iconClass = Class(systemManager.getDefinitionByName(icon));
if (iconClass){
return iconClass;
}
return document[icon];
}
}
August 14, 2008 at 9:31 am
Hi there, great tutorial! I’m working on a component in Flash AS3, in which you can place any text, image or equation inside a comboBox. I have set the iconFunction like this:
iconFunction = function(item:Object):Object {
var o:Object=getIcon(item.data);
return o;
}
public function getIcon(i:int):Object{
if(i<0){
return null;
}
if(contentsArray[i].type==”EQN”){
var m1:MathObject=new MathObject(contentsArray[i].param);
return m1;
}
else if(contentsArray[i].type==”IMG”){
var m2:ImgObject=new ImgObject(contentsArray[i].param);
return m2;
}
else{
return null;
}
}
My MathObject and ImageObject both extend MovieClip and have some data associated with them (xml string or url string is the .param)
My problem is that whilst MathObjects work fine, the images in ImgObjects jump up about 10 pixels when you rollover them and I can’t figure out why. It works fine if the MovieClips are in the library, and the mathobjects are drawn dynamically and work fine, but Img objects don’t – I’ve tried using a Loader and also getting the bitmap from the loader and just using that, but they still jump. Anyone got any ideas??
Thanks!
John G
August 15, 2008 at 2:17 pm
Sorry solved it – the loader hadn’t finished loading when the CellRenderer drew the icon.
September 10, 2008 at 7:30 pm
How can you truncate the first item in list or I should say the one in the prompt?
October 31, 2008 at 6:39 pm
Thanks for this super code
November 4, 2008 at 10:55 pm
Nice stable code. Thank you for your insight!
November 10, 2008 at 3:02 pm
and to get the value of the item as I do
November 11, 2008 at 1:08 am
thank you soo much for this post! i was trying to code this and figure it out. i’m very appreciative.
November 23, 2008 at 1:31 am
Hello, thanks for that, very nice.
I have a question – I am using your combo box in a repeater component and setting the selectedIndex value based on the value in the dataProvider when the user changes from one data set to the next.
If I have the repeater component set to “recycleChildren”, it randomly skips updating the image in the ComboBoxes to reflect the value in selectedIndex. The selectedIndex is correct, however the control isn’t updating and displaying the icon for the selected index item.
If I set recycleChildren to false, it updates fine however the performance is of course then lagging.
Any ideas?
Thanks
December 1, 2008 at 4:18 pm
[...] was surprised that a quick search didn’t find any components to allow this. The closest was a post by Jason Hawryluk, however this required the image to be embedded into the [...]
December 18, 2008 at 10:52 am
Ok I’m pretty new at all this, but one simple questions, how do I exactly use / attach this to my .fla?
March 16, 2009 at 9:35 pm
FYI, iconFunction is working fine but NOT iconField (Yes, i do have icon field in each dataItem)
May 19, 2009 at 5:55 pm
I had the same problem. The issue is that the setter doesn’t execute when you are setting a property to the same value it currently holds. In this case, setting iconField to “icon” exposes the problem.
Fix — initialize the DropDownFactory iconField property to _iconField in the constructor:
public function DexIconCombobox():void
{
super();
//setup the properties on the factory before init so that
//the drop down will gracefully adopt them.
internalDropdownFactory.properties = { iconField:_iconField,iconFunction:null };
dropdownFactory = internalDropdownFactory;
}
March 21, 2009 at 3:37 pm
Hi ,
I have a problem in displaying the icon in the combobox. what i did is in creation complete i made the selectedItem of the combobox to display a paricular item .The item label is displayed correctly but not the icon for that label.Instead it shows the icon of the first item .
This occurs only when the file is first loaded.
then when i select a paticular item from the combobx its labels and the icons are shown correctly.what went wrong in this ?
thanks
Gautham
July 1, 2009 at 7:34 pm
Nice job! I wonder if there is any way to override the prompt attribute. This would be helpful for the default selection.