ExtJS 6.x Modern Button as a Link

Question

On menu items you are able to optionally add either a handler to handle press or mouseclick events or specify and href configuration so that when the menu is simply a link.

  {
     text: 'Example Ext Menu Item',
     iconCls: 'x-fa fa-cog',
     href: 'https://www.google.com'
  }

For the Ext.Button (Modern) how can you have the button act as a link while still supporting the other features of a button (icons, on hover etc).

For example I would like to be able to "right click" on any area of the button and "open in a new tab".

Answer 1

You can wrap the button in a custom element by overriding like this:

Ext.define('MyApp.components.MyButton', {
    extend: 'Ext.Button',
    xtype: 'mybutton',

    element: {
        reference: 'element',
        tag: 'a',
        href: 'http://www.foo.bar'     
    }
});