We have some menus in our project where some of the items have hrefs and hrefTargets set. For those, we need to set a rel to "noopener noreferrer" to prevent a vulnerability. For buttons with such settings, it's straightforward: simply add an autoEl with the appropriate tag and the rel, and the rel will be added to that tag.
The problem with menu items is that you have to set the autoEl's tag to "div", as that is the top level element in a menu item; however, the actual href and hrefTarget end up in the A tag within the DIV, and adding the autoEl with the tag set to "div" adds the rel attribute to the DIV, which is the wrong element. If I try to set the autoEl with the tag set to "a", the DIV element is replaced with an A element, resulting in rendering issues in the menu where that menu item is rendered in the wrong location and overlays one of the other menu items.
How do I add the rel to the menu item so that it ends up in the A tag, where it belongs, instead of the DIV tag?
Do you mean 'ref' or 'rel' attribute? Anyway you can use the following dirty solution:
Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
text: 'google',
href: "http://www.google.de/",
hrefTarget: '_blank',
listeners: {
render: function(menuItem) {
menuItem.getEl().query('a')[0].setAttribute('rel', 'noopener noreferrer');
}
}
}, {
text: 'text item'
}, {
text: 'plain item',
plain: true
}]
});