Tutorial: jQuery Live With ExtJs

For all jQuery user out there. We are all fully aware that there is a function 'LIVE' in jQuery which sole purpose is to attach event handler into any new element entering the page dynamically. This is very clear and obvious in jQuery. However, in ExtJs it will be a little bit more confusing than you think it will be. Hence, i would like to drop this down on this article on the way ExtJS works.

jQuery Live Event

Before i come to the main point, let's look at how jQuery Live event works.

var event = function(){
alert("action clicked")
}
jQuery("p").live("click", event);

Simple and clear. We know what it does so i won't bother to explain.

ExtJs Live Event

How about ExtJs live event? Unfortunately, in Extjs this is not so direct. There are also tricks you should know in order to achieve the same functionality in Extjs. In Extjs, it is as simple as an event attachment as shown below,

var fblike_hide = function(ev, target){
	var item = Ext.get(target).findParent("#facebook_container", 50,true).setDisplayed("none");
}
Ext.getBody().on("click", fblike_hide, this, {delegate: ".fb_cancel"});

The above code shows two things. The method that was triggered upon a click event which is "fblike_hide" and the 'delegate' key used on the 'on' event attachement. The important here is the delegate. Extjs uses delegate to mimic the same behavior as 'LIVE' in jQuery. Of course, jQuery itself also has delegate method but i won't show here since i'm talking about jQuery Live.

In pure english the below sentences means,

Ext.getBody().on("click", fblike_hide, this, {delegate: ".fb_cancel"});

"Attached click event on all .fb_cancel element that can be found within the body tag. Fire 'fblike_hide' when click event is triggered on any element with the class 'fb_cancel'". The trick to use delegate in Extjs is to understand that the event click is attached to all element of .fb_cancel and not the body! The body doesn't get attached with a click event when the delegate key is used! If you are familiar with delegate in jQuery, this should be quite obvious but if you don't, you might get a little bit confuse by Extjs delegate functionality.

Hope it helps!