<?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; window</title>
	<atom:link href="http://www.jslog.com/tag/window/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>Window &#8216;tofront&#8217; and &#8216;toback&#8217; events</title>
		<link>http://www.jslog.com/window-tofront-and-toback-events</link>
		<comments>http://www.jslog.com/window-tofront-and-toback-events#comments</comments>
		<pubDate>Wed, 26 May 2010 10:07:51 +0000</pubDate>
		<dc:creator>radu</dc:creator>
				<category><![CDATA[ExtJS Components]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[overriding]]></category>
		<category><![CDATA[window]]></category>

		<guid isPermaLink="false">http://www.jslog.com/?p=200</guid>
		<description><![CDATA[I like ExtJs and the way it is so modular. This time I needed to have something very easy, which is not implemented by default in Ext, so I rolled my own. I needed windows to fire &#8216;tofront&#8217; and &#8216;toback&#8217; events. In an app I am working on, the user can have quite many windows [...]]]></description>
			<content:encoded><![CDATA[<p>I like ExtJs and the way it is so modular. This time I needed to have something very easy, which is not implemented by default in Ext, so I rolled my own. I needed windows to fire &#8216;tofront&#8217; and &#8216;toback&#8217; events. In an app I am working on, the user can have quite many windows opened and I needed to know programatically when a window comes to front (and to back). The approach was to override the <strong>toFront</strong> method in <strong>Ext.Window</strong>. Below you can see the code, with some basic comments.</p>
<p><b>NOTE</b>: I know there are the <b>activate</b> and <b>deactivate</b> events on every window, but when a window triggers the &#8216;deactivate&#8217; event, <b>Ext.WindowMgr.getActive()</b> still returns it as the active window. This is why I needed the &#8216;tofront&#8217; and &#8216;toback&#8217; events.</p>
<pre class="prettyprint">
(function(){

    // get the previous implementation of the toFront method
    var prevToFront = Ext.Window.prototype.toFront;

    Ext.override(Ext.Window, {

        toFront: function(){

            //get the window manager of this window, or Ext.WindowMgr if it doesn't have one
            var manager = (this.manager || Ext.WindowMgr);
            //get the window which is currently to front
            var activeWindow = manager.getActive();

            prevToFront.apply(this, arguments);

            //only fire tofront and toback events if the current window was not already to front
            if (this != activeWindow){
                this.fireEvent('tofront');
            }

            if (activeWindow){
                activeWindow.fireEvent('toback');
            }

            return this;
        }

    });
})();
</pre>
<p>I needed to run code both <strong>before</strong> and <strong>after</strong> the default implementation of the <strong>toFront</strong> method. If I didn&#8217;t need this, an easier approach would have been to use createSequence:</p>
<pre class="prettyprint">
Ext.override(Ext.Window,{
       toFront: Ext.Window.prototype.toFront.createSequence(function(){
             // code here.
       })
})
</pre>
<p>Nice ExtJs! Go try it!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jslog.com/window-tofront-and-toback-events/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

