Create a normal link (<a href= "https://stackoverflow.com/..." rel="nofollow noreferrer">) in ExtJS

Question

I am struggling with a very simple problem here.

I want to create a normal link in the frontend, but it doesn't seem to work. Here is the code that I use to generate the link (the link was a button, before which, when clicked, a new window opens with the specified URL).

{ xtype: 'button', id: 'PrintTool', tooltip: 'Printer Friendly', iconCls: 'icon-printerFriendly', html: '<a href=\"http:\/\/www.google.at\">x<\/a>', listeners: { 'click': function(button,event) { console.log(this); console.log(event); this.restoreClick(); return true; } } } 

When ExtJS displays the button it creates, I add the html attribute to the object, a link from it.

I see a link with FireBug. When I click on the link, I get the output

  console.log(this); console.log(event); 

in console

Thus, the event is fired. But the link never opens.

I think this has something to do with terminating the CLICK event from ExtJS.

It seems that although there is no button in HTML in Firebug, the object passed to the click event remains the button.

Therefore, I am interested in the question of how to create plain HTML in ExtJS without setting a button like x. Or how can I create a normal link.

I used to open a popup after clicking a button. The popup is blocked in Chrome, IE and other browsers, so instead I need to use a regular link with a url.

Answer 1

Got an answer to my question in the ExtJS forum

Use LinkButton extension written by Animal

http://www.sencha.com/forum/showthread.php?80639-Ext.LinkButton-A-button-class-which-renders-an-lt-a-gt-element./page3

Answer 2

You can also use the html property of the label component and call the controller function. Example:

 {xtype: 'label', html: 'bla bla? <a href="#" onClick="javascript:appName.app.getController(\'myController\').showRegistration();">Register</a>' }