For some reason, Sencha decided to NOT make every single component in their architecture raise a click event. I don’t comprehend this, but I’m sure they had good reasons – possibly performance, possibly scalability.
Whatever the reason, if you want to make anything clickable, it’s very simple. Simply add the following listener.
id : 'myLabel',
xtype : 'label',
html : '<div class="myHelpLabel"></div>',
listeners : {
render : function(c) {
c.getEl().on('click', function(){ this.fireEvent('click'); }, c);
}
}
Poof. Now you can detect when that element is clicked in your controller (if you’re using the Sencha MVC architecture).
init: function(){
this.control({
'sampleView #myHelpLabel' : {
click : function(c) {
// Do something brilliant
}
},
...
2 Responses for "Sencha ExtJS 4: Make any component fire a click event"
Very good tip. Exactly what I was looking for.
Thank you!
Great solution I like it!
Extended
Create a new xtype with this listener
Ext.define(‘Ext.ux.ComponentEvent’,{
extend: ‘Ext.Component’,
alias: ‘widget.componentevent’,
listeners: {
render: function(c) {
c.getEl().on(‘click’, function(){ this.fireEvent(‘click’); }, c);
}
}
});
and use
xtype: ‘componentevent’
if you need a click event for a component.
Leave a reply