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?
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 am having trouble adding a custom itemrenderer to your example. I would like a combobox which 1) displays an icon when selected, 2) displays icons in the drop-down, and 3) has a custom layout inside of the drop down.
In your exapmle, I can create a custom itemrender, but then I have trouble referencing the icon or iconholder class from within that itemrenderer.
Alternatively, I know from previous experience that I can bring in a linked asset (one which is not embedded with the [embed] syntax) and display it in the drop down. But when I haven't been able to find a way to display that linked asset when the drop down is closed.
So I kindof get either 1 or 2, but not both. Help?
I don't have time to look at your code, but it sounds like things are not "data-driven". You shouldn't need to access the iconHolder from a renderer in the drop-down, the iconHolder pulls its icon from the selected item in the dropdown.
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
Hi Alex,
How do i align the icon in the combobox to the right-hand side in the dropdown?
Thanks,
Gautam.
--------------------------
Alex responds:
If I understand your question, you want to customize the dropdown's itemRenderer.
Yeah, that's right. I want to customize the dropdown's itemRenderer so that the icon is aligned to the right.
----------------------
Alex responds:
Make a copy of ListItemRenderer, change the positioning logic for the icon and use that as the itemRenderer in the ComboBox
Alex, thanks for the code.
I am having trouble adding a custom itemrenderer to your example. I would like a combobox which 1) displays an icon when selected, 2) displays icons in the drop-down, and 3) has a custom layout inside of the drop down.
In your exapmle, I can create a custom itemrender, but then I have trouble referencing the icon or iconholder class from within that itemrenderer.
Alternatively, I know from previous experience that I can bring in a linked asset (one which is not embedded with the [embed] syntax) and display it in the drop down. But when I haven't been able to find a way to display that linked asset when the drop down is closed.
So I kindof get either 1 or 2, but not both. Help?
view:
http://design.ericlopresti.com/transfer/bin-debug/IconComboBoxTest.html
src:
http://design.ericlopresti.com/transfer/test22_iconcbx.zip
Thanks in advance,
-Eric
-------------------
Alex responds:
I don't have time to look at your code, but it sounds like things are not "data-driven". You shouldn't need to access the iconHolder from a renderer in the drop-down, the iconHolder pulls its icon from the selected item in the dropdown.
Ask on FlexCoders if you still need help.
Can i use your code in my project?
------------------------------
Alex responds:
yes
Thanks Alex! I really appreciate your code, that was what i was looking for and it's perfect.
Hi Alex,
Can I just ask why you use the dynamic document property of the component to access iterator and selectedItem as opposed to referencing them directly?
Thanks, Sat.
-------------------------
Alex responds:
The assumption is that the icons are embedded in the same MXML file as the instance of IconComboBox.
Great component buddy! Just what I needed. Thanks.