<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A Log on JavaScript &#187; live event</title>
	<atom:link href="http://www.jslog.com/tag/live-event/feed" rel="self" type="application/rss+xml" />
	<link>http://www.jslog.com</link>
	<description></description>
	<lastBuildDate>Thu, 21 Jul 2011 11:00:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>&#8220;Live&#8221; event in ExtJS</title>
		<link>http://www.jslog.com/live-event-in-extjs</link>
		<comments>http://www.jslog.com/live-event-in-extjs#comments</comments>
		<pubDate>Mon, 08 Feb 2010 21:45:38 +0000</pubDate>
		<dc:creator>radu</dc:creator>
				<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[utilities]]></category>
		<category><![CDATA[ExtJS events]]></category>
		<category><![CDATA[live event]]></category>

		<guid isPermaLink="false">http://www.jslog.com/?p=121</guid>
		<description><![CDATA[A quick intro to the live event in ExtJS, using delegates. It is similar to the jQuery live event, but much more powerful. This article provides a quick and useful insight into it.]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>One of the things I really liked about jQuery was the <a href="http://api.jquery.com/live/">&#8220;live&#8221; event</a>.<br />
The jQuery documentation explains it very straightforward: </p>
<blockquote><p>[with a live event you] <b>attach a handler to the event for all elements which match the current selector, now or in the future</b></p></blockquote>
<p><span id="more-121"></span><br />
I wanted to have something similar in ExtJS, and, no surprise, Ext has it, but it&#8217;s not very obvious for a newcomer.</p>
<p>
In jQuery you can easily say:</p>
<pre class="prettyprint">
$('p').live('click', function(){
    // do something on paragraph click
})
</pre>
<p>As it turns out, the &#8220;live&#8221; event in ExtJS is even more powerful and customizable.<br />
In ExtJS, the equivalent of the above is:</p>
<pre class="prettyprint">
Ext.getBody().on('click', function(event, target){
        // do something on paragraph click
    }, null, {
        delegate: 'p'
    })
</pre>
</p>
<p>
For more options and configuration parameters, see <a href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Element" target="_blank">Ext.Element::addListener API</a> (Ext.Element.on() is a shorthand for the Ext.Element.addListener() method)
</p>
<p>As can easily be seen, you can add live events not only to the <b>body</b> element, but to any element.</p>
<pre class="prettyprint">
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'
    })
</pre>
<p>You can further distinguish between the target elements in the event callback</p>
<pre class="prettyprint">
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'
    })
</pre>
</p>
<p>You can see a <a href="http://www.jslog.com/demos/live_event.html" target="_blank">live demo here</a>. Thanks!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jslog.com/live-event-in-extjs/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

