The events are a very important part in every applications, because in this way we can monitor the user actions and our system will react depending on the situation.

The issue

Handling events are complicated when we need our applications to work properly in different browsers because the events are handled differently, so we need to make sure our code works in the browsers we are going to support.

The solution

With Ext JS we can avoid the hard work of detecting the browser and handle the events in a way or another because we only need to add a "listener" in an element or component and Ext JS will do the rest.

//here we will show a message to the user
var msg = Ext.get('msg');
//we get the element "frame"
var el = Ext.get('frame');
		
//Adding an event
el.addListener('mouseover',function(event,element,options){
	//executing anything we need when the event is triggered
	msg.dom.innerHTML = options.param1+'over!'; 
},this,{param1:'the mouse is '});

The previous code we obtained the element "frame" first, which is a div in the HTML document, after that we added an event using the function "addListener" which receives as first parameter the event we want to monitor (click, mouseover, mouseout, mousedown, etc...) and as second parameter receives a function, which is triggered when the specified event occurs; the third parameter is optional and it is the context where the function of the second parameter is going to be executed; the fourth parameter is optional too and we can pass an object with the properties we need. We can use the function "on" as an alias of the function "addListener" since they work the same and we will write less code.

//We get the elements "frame"
var el = Ext.get('frame');
		
//Adding the event
el.on('mouseover',function(event,element,options){
	//executing anything we need when the event is triggered
	msg.dom.innerHTML = options.param1+'over!'; 
},this,{param1:'the mouse is '});

The previous code does exactly the same as the first example, we only used the function "on" instead of "addListener" function. In the next example, I will add more events to the element so we can understand better how to handle events:

//Using the event "mouseout"
el.on('mouseout',function(){
	msg.dom.innerHTML = 'out!';
});
		
//The event is triggered when the user clicks on the element
el.on('click',function(){
	msg.dom.innerHTML = 'click!';
});
		
//When the user depresses the mouse button on the element
//the event will trigger the specified function.
el.on('mousedown',function(){
	msg.dom.innerHTML = 'mouse down!';
});

//When the user releases the mouse button on this element
//the function will be triggered
el.on('mouseup',function(){
	msg.dom.innerHTML = 'mouse up!';
});

Components

The same functions can be use to monitor the events on the components (windows, grids, trees, menus, etc...) and their implementation is exactly the same, we only need to know the event we want to monitor (for example resize, load, collapse, etc.) depending on the component. The next example shows how to monitor an event when a window is minimized:

//Assuming that an instance has been created 
//previously of the component Ext.Window
//and at this point we assign a “listener”
//when is minimized
win.on('minimize',function(win){
	//do whatever you need to do here
	//when the window is minimized
});

Conclusions

Ext JS has a standardized way to execute functions when a certain event occurs making it work on different browsers. As always if you have any questions or suggestions you can leave a comment, also I recommend you to subscribe to our feeds or follow Quizzpot on Twitter so you can be know what we are doing.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!