« DataGrid Footers | Main | Disabling List Selection »

Icons in ComboBox

Somebody recently asked on FlexCoders about how to get icons to show up in the ComboBox. Here's how I'd do it.

Download Source

Run Demo

Comments

It is simple and neat!
Thank you , Alex.

Cool! You did good job. Unfortunately your example very simple, but very nice you sharing your code to everyone. I want to help you with datagrid footer component. I did for my company. Your DG is hack, people can not resize or swap columns I fixed these problem if you want I can share my code.
David

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

Hmm, I didn't think it was a "hack". In theory, all you need to do is call invalidateDisplayList() on the border to get it to refresh. You can send me your code if you want though.

Thanks very much for the example.
A couple of questions - I know the file is just a quick example, but would it be better to send in the icon as a reference rather than a string, and then do this:

var iconClass:Class = iterator.current.icon;
var icon:IFlexDisplayObject = new iconClass() as IFlexDisplayObject;

so that you're only reliant upon the data in the dp, and do not need to know anything about properties of the component's document?

I initially tried to declare instances of the images in the array like so:
{ label: "icon A", icon:new iconA() }
The debugger seems to show that 'icon' is referencing an icon instance each time, but only the selected item's icon shows (no icons show in the dropdown). If you could help clarify why this happens that would be great.

Thanks again.

----------

You might be having a documnet scope issue. The dropdown is a popup and its document is the application and not a sub-document.

You can use instances, classes or references. Most like references as the set of icons is known and the data is sourced as XML and can't have objects in it

First off,Thank you , Alex.And I just "extend" Ur Iconcombobox,got an TwoIcon(two word flag icon) Combobox,here is the sample link:
http://www.freehere.cn/mylab/IconCombobox/
Just like this for Translation to represent from one language to another.Here is my Translation Engine link:
http://www.freehere.cn/mylab/TranslationEngine/
any suggestion?

Hi,

I had the same issues with these examples in that the columns resizing doesn't synchronise between the two. I had an additional problem that the the data in the rows were not necessary all the same currency. Simply adding them up didn't work. I got round all this by making a compound component with two data grids, one for the rows and one for the totals.

I made use of callback functions such as labelFunction for formatting of the rows in their individual currencies and then had a couple of new callbacks for conversion of the data into a common currency for calculating the sub-totals.

For the columns widths I hide the headers on the totals grid and trap the columnStretch event on the main grid.

It is not perfect but it works OK for me. I have an issue with the situation where the values datagrid gets a scrollbar and the totals obviously doesn't, so the column widths get misaligned, but other than that it works pretty well.

Like the previous poster I would be happy to share the code.

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

Feel free to post links for folks to look at your work.

Hi alex, I've implemented this into one of my apps and it works fine. But I cannot figure out how I can assign the dataprovider for my combobox upon creationComplete of my main app. As soon as I try that I get an error on line 34 of IconComboBox.as:
var iconClass:Class = document[iterator.current.icon];

I normally never declare variables and assign their values at the same time as you did here:
public var dp:Array = [
{ label: "icon A", icon: "iconA" },
{ label: "icon B", icon: "iconB" },
{ label: "icon C", icon: "iconC" }
];

Instead I'd like to populate my array once the creationComplete of my main app fires. but as soon as I do that I get the aforementioned error. It's a null object reference error on line 34 of IconComboBox.as

Can you advise how I can work around this?

Thanks

Stefan

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

I would just add code that doesn't fail if iterator doesn't exist. When you finally get the data and assign it, it should run through that code again.

Good stuff Alex... I tried to use your sample in my app but I am not able to see the icon in the combo (when it opens). When I select an option, the icon changes correctly, but for some reason I am not able to see the icon inside the combobox.

I am using VIEWS and your code inside a view that is loaded from a ViewLoader.

Your sample app works like a charm.

Any suggestions?

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

The code assumes that the icons are embedded in the same document as the ComboBox. It might be that your icons are defined in a different MXML file.

If I change the dataprovider to XML, the icons no longer show up in the dropdown, but will correctly show up in the selected item.

I define the XML as follows:
public var dp:XML = new XML(
<items>
<item label="icon A" icon="iconA" />
<item label="icon B" icon="iconB" />
<item label="icon C" icon="iconC" />
</items>
);


And then change the combobox code to say:
<local:IconComboBox id="cb" labelField="@label" initialize="cb.dataProvider=dp.item"/>

Inside the actionscript code, I changed

var iconClass:Class = document[iterator.current.icon];
to
var iconClass:Class = document[iterator.current.@icon];

and

var iconClass:Class = document[selectedItem.icon];
to
var iconClass:Class = document[selectedItem.@icon];

As I said, the icon shows up in the selected item, but not in the dropdown. Does anyone have any idea why?

---------------------
Alex responds:

You may have to customize the dropDownFactory to set the iconField="@icon"

I tried you example in my application. On combo box it showing label and icon. but it is not showing icons when i open drop down.

------------------
Alex responds:

Make sure the iconField is set properly. If you still have problems, I'd ask for help on FlexCoders.

Same thing works fine in independet application. But i t does not work in my application.

--------------------
Alex responds:

I'd ask on FlexCoders. You'll usually get faster help from more people.

One reason icons may not show is if they are embedded in a different MXML file than the ComboBox

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)