PDA

View Full Version : open a hyperlink on enter key.



namrms
17 Jun 2013, 6:04 AM
Hi

Using Ext 4.0 . We have used href in 2 different ways : we are able to get the focus on the href using key board but unable to open the link on enter key.

1) As a html within a panel
2)as a tbtext xtype in a toolbar of a grid.

In both cases the links dont open when enter key is pressed. They work fine on mouse click.
Here is the code used to create the hyperlinks .

As html with a panel :
var html1 = '&nbsp;&nbsp<a href="javascript: mib1popup();" >View MIBs</a> &nbsp';
{xtype: 'panel', id: 'links1', width: 450, height: 30, unstyled: true, title: ' ', bodyPadding: 0, html: html1}

As a tbtext :
{type : 'tbtext',
text : '<a href="javascript:mibpopup()">View MIBs</a>'}

The links dont open on enter key but it works fine with mouse click.

We tried the following fixes but this is resulting in multiple windows being opened with the target link.
1)changing the href tag as higlighted in red below :
html1 = '&nbsp;&nbsp<a href="javascript: mib1popup();" onkeyup="javascript: if (event.keyCode==13) mib1popup();">View MIBs</a> &nbsp;

2)use a keyMap on the tbtext as below :
{
xtype : 'tbtext',
text : '<a href="javascript:mibpopup()">View MIBs</a>',listeners:{afterrender: function(){
var keyMap = Ext.create('Ext.util.KeyMap', this.getEl(), [{
key: Ext.EventObject.ENTER, shift: false, ctrl: false,
fn: function() {
mibpopup();
}
}]);}}
}

both the methods are resulting in the key event getting triggered multiple times.

Please suggest.

Regards,
Namratha

slemmon
19 Jun 2013, 2:14 PM
This seems to work ok for me:


window.mibpopup = function () {
console.log('mibpopup called');
};


Ext.widget('toolbar', {
renderTo: document.body,
items: [{
xtype: 'textfield',
emptyText: 'TAB > press enter',
listeners: { afterrender: function () { this.focus(); } }
}, {
xtype: 'tbtext',
text: '<a href="javascript:mibpopup()">View MIBs</a>'
}]
});


Or here's an alternative - a button with an href config and ui of 'whatever'


window.mibpopup = function () {
console.log('mibpopup called');
};


Ext.widget('toolbar', {
renderTo: document.body,
items: [{
xtype: 'button',
text: 'View MIBs',
href: 'javascript:mibpopup()',
ui: 'nothing',
listeners: { afterrender: function () { this.focus(); } }
// just press enter once the page loads since the button is alraedy focused
}]
});


If it were me I'd use the button with the dummy ui config.