A Log on JavaScript

jQuery is a nice JavaScript library, we all know it. But not many of us are familiar with ExtJS. As I have now been working with both, I needed some time to adapt to the change from jQuery to ExtJS and rediscover how things are done the easiest way with both libraries.

One of the things I really liked about jQuery was the “live” event.
The jQuery documentation explains it very straightforward:

[with a live event you] attach a handler to the event for all elements which match the current selector, now or in the future

I wanted to have something similar in ExtJS, and, no surprise, Ext has it, but it’s not very obvious for a newcomer.

In jQuery you can easily say:

$('p').live('click', function(){
    // do something on paragraph click
})

As it turns out, the “live” event in ExtJS is even more powerful and customizable.
In ExtJS, the equivalent of the above is:

Ext.getBody().on('click', function(event, target){
        // do something on paragraph click
    }, null, {
        delegate: 'p'
    })

For more options and configuration parameters, see Ext.Element::addListener API (Ext.Element.on() is a shorthand for the Ext.Element.addListener() method)

As can easily be seen, you can add live events not only to the body element, but to any element.

Ext.get('header').on('click', function(){
           //only handle anchors with the "menu" css class,
           //which are in the element with id="header"
     }, this /* the scope */, {
         delegate: 'a.menu'
    })

You can further distinguish between the target elements in the event callback

Ext.get('header').on('click', function(e,target){
         //an anchor with class="menu" has been clicked in
         //an element with id="header"

         // Ext.Element.is(selector) tests the current
         // item for the given selector

         // target is of type HtmlElement, not Ext.Element,
         // so wrap in Ext.get()
         if (Ext.get(target).is('.item')){
             // do smth special with anchors with "item" class
         }
     }, this /* the scope */, {
         delegate: 'a.menu'
    })

You can see a live demo here. Thanks!