From Learn About the Ext JavaScript Library

In Javascript, handling events is one of the things you'll have to do very often. It can be quite hard to do though because there are cross-browser differences which require you to normalize events. ExtJS however makes handling events a lot easier and sometimes even fun(!).

Contents 1 Very basic example 2 Scope of the handler function 3 Passed arguments 4 Using the event 5 Event options 6 Custom arguments 7 Attaching multiple handlers 8 Conclusion

Very basic example

Imagine for example that you want to alert a message to a user when they click on a link. Please read on after this example, because you would probably want to know some more before starting to handle events.

var el = Ext.get('somelink');
el.on('click', function(){
    alert('you click on a link');
});

Note that we used an anonymous handler function here. Also important to know is that you should execute this code after the DOM has been initialized (using the Ext.onReady() function).

Scope of the handler function

OK, so we just learned the very basics of event handling. Lets look at some more things we can do. By default, the scope of the handler function will be the HTML element you have bound the event to. Subsequently, anytime the keyword this is used within the scope, it will always refer to the HTML element.

var el = Ext.get('somelink');
el.on('click', function(){
    alert(this.id); // this will alert 'somelink'
});

But what if we want to change the scope of the handler to something else? You can pass that object as the scope argument.

onClick = function(){
    alert(this.someProperty); // this will alert 'someValue'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

Note: for more information on scopes you can click here

Passed arguments

In the previous example we saw how you can change the scope for the handler function. But what if we still want to access the element. We can make use of the arguments being passed to the handler function to do this.

onClick = function(ev, target){
    alert(this.someProperty); // this will alert 'someValue'
    alert(target.id); // this will alert 'somelink'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

As you can see we used the second argument (target) in this example. The first argument is the Ext Event object. We can use this object for many things.

Using the event

The Ext Event object that is being passed to the event handler has multiple convenience properties and methods. A few examples are shown here:

onClick = function(ev, target){
    ev.preventDefault(); // Prevents the browsers default handling of the event
    ev.stopPropagation(); // Cancels bubbling of the event
    ev.stopEvent() // preventDefault + stopPropagation
 
    var target = ev.getTarget() // Gets the target of the event (same as the argument)
    var relTarget = ev.getRelatedTarget(); // Gets the related target
};

For more info on things you can do with the Ext EventObject please check the docs.

Event options

There are a lot of configurable options for events. Let me give you some examples:

Delayed Listeners (delayed event firing)

el.on('click', this.onClick, this, {delay: 250});

Buffered Listeners (buffers an event so it only fires once in the defined interval)

el.on('click', this.onClick, this, {buffer: 100});

"Handler" Listeners (prevents default and optionally stops propagation)

// prevent default
el.on('click', this.onClick, this, {preventDefault: true});
 
// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});
 
// prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});

Other options

el.on('click', this.onClick, this, {
    single: true, // removed automatically after the first fire:
    delegate: 'li.some-class' // Automatic event delegation!
});

Custom arguments

You are also able to pass custom arguments to the event handler. This is useful in cases where you want to use a variable inside the handler without changing the scope, adding it to the scope object or using a closure. To do this you basically just add custom variables to the options object.

function onClick(ev, target, options){
   alert(options.someProperty); // alerts 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

Attaching multiple handlers

If you want to attach multiple handlers to one element you can do this in one function call.

el.on({
    'click' : {
    	fn: this.onClick,
	scope: this,
	delay: 100
    }, 
    'mouseover' : {
    	fn: this.onMouseOver,
	scope: this
    },
    'mouseout' : {
    	fn: this.onMouseOut,
        scope: this
    }
});

Conclusion

As you see, Ext provides lots of functionality to make your life easier when dealing with events. We covered all the basics here but if you want more, check out the forum post by Jack Slocum.