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.

Answer 1

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}'}}