ExtJS how to handle component related events in the controller?

Question

I have a Panel , and I need to capture / handle the mouseover event for an element of this panel.

I am currently doing this by extending the ExtJS panel with the following listener (as suggested here ):

... listeners: { mouseover : { element : 'el', fn : function(){ console.log('captured mouseover'); } } }, ... 

Can this be done using an ExtJS controller ? So do I have event handling in one controller?

Answer 1

You're on the right track, just not quite there. The controller's task is to manage components, not elements. If you want to make the mouseover event for an element accessible at the component level, just reinstall it as a separate mypanelmouseover event and use it in Controller control ().
Nice and neat.

EDIT :

Here's how to do it:

 Ext.define('My.Panel', { extend: 'Ext.panel.Panel', constructor: function(config) { var me = this; me.callParent(arguments); me.addEvents( 'mypanelmouseover' ); }, afterRender: function() { var me = this; me.callParent(); // Declarative style with listeners reads better, // but this is shorter and does the same me.mon(me.getEl(), 'mouseover', function() { this.fireEvent('mypanelmouseover') }, me); } }); Ext.define('My.Controller', { extend: 'Ext.app.Controller', init: function() { var me = this; me.control({ 'panel': { mypanelmouseover: me.onMyPanelMouseover } }); } }); 

Hope this helps. The basic idea is to stay declarative and separate your code instead of creating an unreadable callback chain. A good side effect is that you control the situation and can decide which events you want to recover, and when and how to respond to them.

Answer 2

You can attach a listener after displaying the component:

 Ext.define('My.controller.A', { extend:'Ext.app.Controller', init: function(){ this.control({ 'panel1':{ afterrender: function(cmp){ cmp.getEl().on('mouseover', this.panel1_mouseOver); } } }); }, panel1_mouseOver: function(e, t, eOpts){ alert('mouseover'); } }); 

Answer 3

I think the only way to add this feature is to change the library source for the Panel component. I don’t think this is a good idea, because it will probably slow down your site with all the additional listeners, but you would have done that.

http://docs.sencha.com/ext-js/4-1/source/Panel.html#Ext-panel-Panel Search for "me.addEvents" to see the events that ExtJS decided to provide. You can add a mouseover event there, and then add a listener to the controller.

What exactly are you doing for this listener? If you just add a class to the panel div element, you can simply use the overCls configuration http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

It appears that there are only a few components that support the mouseover event. Is it possible to separate this mouse from functionality in the menu or button component?

Answer 4

Each component has a getEl method. Use this method to get the Dom element and then register an event on it.

Answer 5

@ Alexander Tokarev For a while, I was puzzled by how your guided listener connected the "mypanelmouseover" to the "mouseover" element until I came across another example elsewhere. Your mon call (mon (item, ename, [fn], [scope], [opt]) is missing the ename parameter (event name).

me.mon (me.getEl (), 'mouseover', function () {this.fireEvent ('mypanelmouseover')}, me);

Sorry to post this answer, the code change was rejected and I have not enough comments for comments!