ExtJS7: Anchor tag not honoring ext routes - extjs

Question

If a ext view route is used with anchor tag, clicking on that link always opens a new tab. This force realod entire ext app in new tab. Is there a way to force anchor tag or anchor in html to redire ct to that view instead within app
{
xtype: 'component',
autoEl: {
tag: 'a',
html: 'Some Action',
href: '#someroute'
class: 'link-some-action'
},
listeners: {
click: function(){
console.warn("I AM TRAPPED");
}
}
}
OR
{
xtype: 'box',
html: ' Saome Action ',
listeners: {
click: function(){
console.warn("I AM TRAPPED");
}
}
}
In both case as illustrated, clicking on element opens a new tab, hence forcing app to load again

Answer 1

in your case, you should add a listener to el, here is fiddle
Ext.define('Controller', {
extend: 'Ext.app.ViewController',
alias: 'controller.mycontroller',
onElClick:function(){
console.log("I AM FREE");
this.redirectTo("test")
}
});
Ext.create('Ext.panel.Panel', {
style: "border: 1px solid red",
height: 100,
controller:"mycontroller",
title: "test",
renderTo: Ext.getBody(),
items: [{
xtype: 'component',
autoEl: {
tag: 'a',
html: 'Some Action',
href: '#someroute',
class: 'link-some-action'
},
listeners: {
el: {
click: "onElClick"
}
}
}]
})