Get an html link click in a controller ?

[GuillaumeF]

Hi,

using ExtJs 4.1

A simple button in a Toolbar :

items: [{
text: 'Déconnexion',
action: 'logout'
}],
I get the logout action in the Controller :

this.control({
'MainToolbar button[action=logout]': {
click: this.onLogout
}
});
And it works fine.

Now I created an html link like this :

items: [{
title: 'myPanel',
html: '<p>blabla</p><p><a href="">Vous déconnecter</a>/<p>'
}]
When the user click on the <a> link, how to get this action in the Controller in the same way the toolbar button do ?

Regards.

[vietits]

View:


....
items: [{
title: 'myPanel',
html : '<p>blabla</p><p><a href="">Vous déconnecter</a>/<p>',
listeners: {
afterrender: function(panel){
panel.getEl().down('a').on({
click: function(evt){
evt.stopEvent();
panel.fireEvent('linkclick');
}
})
}
}
}]
...

Controller:


....
init: function() {
this.control({
'panel[title=myPanel]':{
linkclick: function(){
console.log('Link clicked.')
}
}
});
},
...

[GuillaumeF]

Great ! It works fine. Thank you.

Here a solution I created from your code. The fired event code is written in the link href attribute. Listener code is consolidated. Useful to create lot of links.


Ext.define('Lgc.Util', {
statics: {
panelLinkEvents: {
afterrender: function(panel){
panel.getEl().down('a').on({
click: function(evt, el){
evt.stopEvent();
panel.fireEvent(el.attributes.getNamedItem('href').nodeValue);
}
})
}
}
}
});


// During app initialization
Ext.create('Lgc.Util');

// Panel creation
...
initComponent: function() {
this.items= [{
title: 'Connexion',
html: '<p>blabla</p><p><a href="logout">Vous déconnecter</a></p>',
listeners: Lgc.Util.panelLinkEvents
}];

this.callParent(arguments);
}
...

// In controller
this.control({
'panel[title=Connexion]':{
logout: function(){
alert('logout');
//click: this.onLogout
}
}
});