Assigning icons to a ComboBox's List using dynamically-loaded external images.

Question

I'm trying to implement this for an instance of ComboBox specifically, which uses a List to display the dropdown menu full of items. Lists can have icons associated with them, as described in the documentation:

var comboBox = addChild(new ComboBox());
comboBox.dataProvider = new DataProvider([{label:'item1',iconClass:IconClass1},{label:'item2',iconClass:IconClass2}]);
comboBox.dropdown.iconField = 'iconClass';

... assuming IconClass1 and IconClass2 are valid classnames of symbols in our library, this code works perfectly.

Here's my question - the contents of this ComboBox will be XML-driven, populated dynamically, and I'd really rather include that icon reference as a filename instead of a classname, so that when the whole thing is implemented, the icon can be changed in the XML without opening Flash and adding a new symbol to the library. Clients aren't generally good at that sort of thing.

Ideally, I'd like to be able to find a way to reference the container for the instance of that icon class - the ComboBox.dropdown is obviously keeping a reference to each list item somewhere, and if I can find it, I can load the icon images dynamically, then addChild them to the icon instance. See what I'm saying?

Is this possible? Is there another trickier way to accomplish this?

Answer 1

I haven't tried it, but I would assume you could just use a basic custom class, say ImageIconField, which you would instantiate with each image, pass in with data in DataProvider and set iconField. Like so:

var customImageIcon:ImageIconField;
var dataProviderArr:Array = [];
for (var node:XML in xml_data.children()) {
    customImageIcon = new ImageIconField();
    customImageIcon.loadFromFile(node.@icon_path.toString());
    dataProviderArr.push({label:[email protected], iconClass:customImageIcon})
}
combobox.dropdown.iconField = 'iconClass';
combobox.dataProvider = new DataProvider(dataProviderArr);