EXTJS, Unable to bind event handler to controller
I'm using EXTJS with Node.JS and am having difficulty with handling events in the context of the EXTJS MVC framework.
I've been able to easily register click events when defining the Event Listener in the Class Definition of the view, but can't seem to move this code into the controller.
Here's a look at my current code:
//Icon.JS (VIEW)
Ext.define('GeekFlicks.view.Icon', {
extend: 'Ext.button.Button',
alias: 'widget.icon',
height: 48,
width: 48,
text: 'icon',
draggable: true
});
//Icon.JS (CONTROLLER)
Ext.define('GeekFlicks.controller.Icon', {
extend: 'Ext.app.Controller',
models: ['Icon'],
stores: ['Icons'],
views: ['Icon'],
init: function () {
this.control({
'listener': {
click: function(c) {
alert('working');
}
}
});
},
});
Any help or explanations around how EXTJS deals with these sort of events is will be extremely helpful and much appreciated! Thanks.
Change this.control to be something like this:
'icon': {
click: function(c) {
alert('working');
}
}
You basically need to let controller know which element is going to control. I also suggest reading about using refs: [] in the controllers to easier access visual elements and views.