View Full Version : Change Menu Icon dynamic

29 Jul 2014, 11:06 PM
Hey, i try to change a Menu Icon after a click.

I did it with setSrc().
If I look at the menuItem after it, the link is the new one, but it is still the old Icon.

I tried a refresh and a doLayout but may I did it wrong.

Did somebody have the same Problem?

Thanks Liz

29 Jul 2014, 11:29 PM
Please post your code. What is setSrc?

30 Jul 2014, 1:09 AM
'setSrc' is used for the image component http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Img-method-setSrc
To chage the icon of a menu item you can use 'setIcon' or 'setIconCls'
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.Item-method-setIconCls (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.Item-method-setIcon)

30 Jul 2014, 4:40 AM
I start with this path"plugins/report/resources/images/dashboardheader/preferences/preferences.png"

after changing the icon via setIcon the Icon path is "plugins/report/resources/images/tools/delete/delete.png" but the Icon is still the first one.

I don't want to do it with IconCls because I have so many Icons to set so it would not work.

So hier is myCode from the View:

menu: { ui:'dark-menu',
layout: 'hbox',
height: 40,
left:'0 0 0 0',
grp: 'headerMenu',
lid: 'headerSegment',
icon: oResManager.getImageUrl( 'dashboardheader/segment/segment' ),
hideOnClick: true

the oResManager builds the real path to the image because i have to use so many ones.

In the Controller I use


30 Jul 2014, 5:37 AM
You are right. I tested myself and it doesn't work. I looked for bug reports, but didn't find anything.
Are we missing something? Someone, help! :-/

30 Jul 2014, 1:21 PM
The code for setIcon is:

setIcon: function(icon){
var iconEl = this.iconEl,
oldIcon = this.icon;
if (iconEl) {
iconEl.src = icon || Ext.BLANK_IMAGE_URL;
this.icon = icon;
this.fireEvent('iconchange', this, oldIcon, icon);

iconEl is an Ext.dom.Element, not a DOM node, so that won't work.

Patch it to use set and it should be fine.

1 Aug 2014, 1:48 AM
I couldn't resolve the problem like that so I did it one another way:

I have two menuentiers, one with each icon.
The secound one is hidden.
If I want to change it, I just hide the first one and show the other one.

Is not a good way but it was faster than trying around.

When I have some more time I try it again in a nicer way.

Until that, someone may have a glue that to do.

30 Aug 2016, 8:37 PM
Once the element is rendered, you normally must access the dom directly to make such changes.

This works:

menuItem.iconEl.dom.setAttribute('src', iconUrl);

or if you want to reset the icon:

menuItem.iconEl.dom.setAttribute('src', Ext.BLANK_IMAGE_URL)

6 Oct 2016, 12:58 PM
I had exact same problem where menuitem icon needed to be conditioned.
I solved it by deriving from skirtle's solution by doing the following:

setIcon: function(icon){
var iconEl = this.iconEl,
oldIcon = this.icon;

if (iconEl) {
iconEl.dom.setAttribute('style', 'background-image:url(' + (icon || Ext.BLANK_IMAGE_URL) + ");");
this.icon = icon;
this.fireEvent('iconchange', this, oldIcon, icon);

Let me know if this works for you as well.