<?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>VinylFox &#187; Scope</title>
	<atom:link href="http://www.vinylfox.com/tag/scope/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.vinylfox.com</link>
	<description>The Playground of VinylFox (Shea Frederick)</description>
	<lastBuildDate>Thu, 29 Jul 2010 16:37:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Four Tips for Staying on Track With Scope in ExtJS</title>
		<link>http://www.vinylfox.com/four-tips-for-staying-on-track-with-scope-in-extjs/</link>
		<comments>http://www.vinylfox.com/four-tips-for-staying-on-track-with-scope-in-extjs/#comments</comments>
		<pubDate>Tue, 26 May 2009 21:01:57 +0000</pubDate>
		<dc:creator>Shea Frederick</dc:creator>
				<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[ExtJS Tutorials]]></category>
		<category><![CDATA[Scope]]></category>

		<guid isPermaLink="false">http://www.vinylfox.com/?p=262</guid>
		<description><![CDATA[We have all been there, mucking around with code, thinking to ourselves &#8220;why does this component not have an X method?&#8221; or &#8220;where did all my scoped vars run off to?&#8221; spending valuable time debugging your code just to eventually find out that you have gone out of scope and didn&#8217;t know it. The unfortunate [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.vinylfox.com/wp-content/uploads/2009/05/img_0902-1-300x282.jpg" alt="SCOPE DONKEY!" title="SCOPE DONKEY!" width="300" height="282" class="alignleft size-medium wp-image-277"  align="left" style="margin: 10px;" />We have all been there, mucking around with code, thinking to ourselves &#8220;why does this component not have an X method?&#8221; or &#8220;where did all my scoped vars run off to?&#8221; spending valuable time debugging your code just to eventually find out that you have gone out of scope and didn&#8217;t know it. The unfortunate thing is that its so incredibly easy to loose track of your scope, and not often are the results of whats going wrong making it glaringly obvious that your scope has been lost.</p>
<p>A solution that works for me has taken the shape of a sticky note &#8211; I affectionately refer to this as the &#8220;SCOPE DONKEY!&#8221; note. Its my reminder for things to look for when I get that icky feeling that there is a scope related problem. So here is the rundown:</p>
<h2>Each</h2>
<p>Using <i>Ext.each</i> or the <i>each</i> method of an array or store, etc. is the first easy way to loose scope. The following bit of code looses scope, so our <i>doSomething</i> method is not available inside of the each.</p>
<p><textarea class="js" cols="100" name="code">Ext.each(myArry, function(r){<br />
    this.doSomething(r);<br />
});</textarea></p>
<p>This next code maintains scope within the <i>each</i> loop.</p>
<p><textarea class="js" cols="100" name="code">Ext.each(myArry, function(r){<br />
    this.doSomething(r);<br />
}, this);</textarea></p>
<p>The difference is in the third argument that passes scope to the <i>each</i> loop.</p>
<h2>Events</h2>
<p>Setting up event handlers is another easy place to loose scope, and when the event finally fires off it quickly becomes unclear where the problem originated</p>
<p><textarea class="js" cols="100" name="code">myCmp.on(&#8216;myevent&#8217;, this.myHandler);</textarea></code></p>
<p>This next code maintains scope within the <i>event</i> handler.</p>
<p><textarea class="js" cols="100" name="code">myCmp.on('myevent', this.myHandler, this);</textarea></p>
<p>Just like with the <i>each</i> loop, we are passing in a scope as the third argument</p>
<p><b>NOTE:</b> (thanks <a href="http://rich-waters.com/blog">Rich Waters</a>) this also applies to subscribing to events via the listeners config, for example:</p>
<p><textarea class="js" cols="100" name="code">listeners: {<br />
    myevent: {<br />
        fn: this.myHandler,<br />
        scope: this<br />
    }<br />
}</textarea></p>
<h2>Buttons</h2>
<p>A <i>Buttons</i> handler is scoped to the button component itself by default, so everything inside that handler has a <i>this</i> that references the button. Its not very often that I actually use a buttons handler to manipulate the button itself, so I need my scope somewhere else. Luckily the button config has a <i>scope</i> option.</p>
<p><textarea class="js" cols="100" name="code">buttons: [{<br />
    text: 'Do Something',<br />
    handler: this.doSomething,<br />
    scope: this<br />
}]</textarea></p>
<h2>Message Boxes</h2>
<p>The <i>MessageBox's</i> callback is a similar situation to the <i>Button</i>, so we need to pass it a scope as well, this way we have access to <i>this</i> inside the handler.</p>
<p><textarea class="js" cols="100" name="code">Ext.Msg.prompt(<br />
    'Do Something',<br />
    'Something',<br />
    this.doSomething,<br />
    this<br />
);</textarea></p>
<p>I hope these tips help you out - By paying special attention to these four areas you should be able to minimize those late night scope related debugging sessions.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vinylfox.com/four-tips-for-staying-on-track-with-scope-in-extjs/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
