ExtJS：将rel属性添加到菜单项

Question

我们在我们的项目中有一些菜单，其中某些项目设置了hrefs和hrefTargets。对于这些，我们需要将引用设置为“ noopener noreferrer”以防止漏洞。对于具有这种设置的按钮，很简单：只需添加带有适当标签和rel的autoEl，然后rel将被添加到该标签。

菜单项的问题在于，您必须将autoEl的标签设置为“ div”，因为这是菜单项中的顶级元素；但是，实际的href和hrefTarget最终位于DIV中的A标签中，并且将标签设置为“ div”的autoEl添加到DIV中会添加rel属性，这是错误的元素。如果我尝试将标签设置为“ a”的autoEl设置为DIV元素，则将其替换为A元素，从而导致菜单中的渲染问题，其中该菜单项在错误的位置渲染并覆盖了另一个菜单中的一个项目。

如何将ref添加到菜单项中，使其最终位于所属的A标签而不是DIV标签中？

Answer 1

您的意思是'ref'或'rel'属性？无论如何，您可以使用以下肮脏的解决方案：

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
        }]
    });