Icon class does not apply to a ExtJS menu item containing text field

Question

In an ExtJS 6 classic mode application I am trying to configure a menu having both regular items and items with input fields. The idea is to let the user click normal item and then display an item where text can be edited. This is how it looks

items: [{ text : '<b>Add to Favorites</b>', iconCls : 'ico-new', hideOnClick : false, handler : 'onAddToFavorites', hidden : false, bind : { hidden : '{isEditing}' } },{ xtype : 'textfield', iconCls : 'ico-new', // ignored by ExtJS - why? selectOnFocus: true, anchor : '100%', hidden : true, bind : { hidden : '{!isEditing}' } }];

It works fine, however iconCls property is entirely ignored for items with xtype:'textfield'. Actually, it does not seem to affect anything but regular items.

So the question is how to make ExtJS display menu icon for items containing input fields.

Textfields don't have a config property iconCls. Search for cls in the documentaiton, there are many possibilities, try which works out for you. — Peter Koltai
– Peter Koltai, Commented Mar 12, 2023 at 9:57
cls, fieldCls, userCls etc. These all add extra classed to different components. Filter for "cls" under Filter members in the documentation page I linked. — Peter Koltai
– Peter Koltai, Commented Mar 13, 2023 at 12:22

Ali Tooshmalani · Accepted Answer · 2023-04-05 05:40:15Z

For this problem, if you want to place the desired icon for each item, you should use the iconcls configuration, which displays the icon in black.

{ text : '<b>Add to Favorites</b>', iconCls : 'far fa-users',hideOnClick : false,handler : 'onAddToFavorites',hidden : false,bind : {hidden : '{isEditing}'}}

But if you want to put the icons in different colors, you should use the cls configuration for each item and create a css or scss file with the same name in the path where the main class is defined, and use the icon content configuration. Enter to display the icon next to each item to be displayed

.icon-new{ color : red; font-family: 'Font Awesome 5 Pro'; font-size: 15px; font-weight: 200; content: '\f2f1'; top: 10px !important; right: 77px !important; }

{ text : '<b>Add to Favorites</b>', cls : 'icon-new', hideOnClick : false, handler : 'onAddToFavorites', hidden : false, bind : { hidden : '{isEditing}' } }

The third method is that all the items used in the menu have their usehtml configuration set to true. You can use html commands in the text section.

{ text : '<b><i class="far fa-tags" style="font-size:16px;color:#FFF">Add to Favorites</b>', iconCls : 'far fa-users',hideOnClick : false,handler : 'onAddToFavorites',hidden : false,bind : {hidden : '{isEditing}'}}

The answer looks entirely irrelevant to the question asked. The problem I am experiencing is that input fields in menus do not display icons next to them. The answer seems to mention only regular text items with which I have no problems at all. Please elaborate.
Hi Dear Mooh, Can you explain about your problem more, so I do not good understand your problem. you want set icon next to input field?

Collectives™ on Stack Overflow

Icon class does not apply to a ExtJS menu item containing text field

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related