JavaScript Joy

Making an iOS springboard shortcut that redirects

Andrew — Sun, 13 May 2012 23:52:04 +0000

When a URL redirects you do not have the opportunity to bookmark the original URL or put the original URL into a springboard shortcut. Here is how you can accomplish that feat.

1. Open safari
2. Navigate to a webpage (any page, it doesn’t matter)
3. Hit the “New Bookmark” button, select “Add Bookmark”
You will NOT be able to edit the URL here. Just press the Save button
4. Hit the “Bookmarks” button, and hit the Edit button
5. Next hit the small arrow on the right side of the bookmark you want to become your desired bookmark
6. Edit the URL to the desired destination
You now have a bookmark to the desired URL
7. Go to settings, turn on airplane mode
8. Open Safari, hit “Bookmarks”, and select your new bookmark
9. Now hit the “New Bookmark” button and select “Add to Home Screen”
10. Enter a title, the icon will be white, but don’t worry it will change when you navigate there for the first time
11. Turn off airplane mode
12. Enjoy your redirectable URL springboard shortcut!!

Ext4 Image Viewer

Andrew — Mon, 20 Feb 2012 05:59:16 +0000

This is a basic Image Viewer I wrote a while back. Maybe it will be useful for someone. Includes drag scroll & zoom support. It has pretty good cross browser support, but I didn’t test thoroughly as it was just a play app I used to learn some Ext4.

Live Demo Page

Simple PHP Comet example

Andrew — Thu, 21 Apr 2011 13:22:36 +0000

This is a simple iframe-based PHP Comet example. Additional work must be done to be able to build up and tear-down connections, but the effect is solid. This is a quick and dirty method without having to use heavy feature detection to determine if xhr readystate 3 is available.

References:
Even Faster Web Sites by Steve Souders
http://www.zeitoun.net/articles/comet_and_php/start
http://cometdaily.com/2007/11/18/ie-activexhtmlfile-transport-part-ii/

frontEnd.html:



	Comet demo
	


The server time will be shown here

backEnd.php


 
/*
Simple COMET script tested to work with IE6, IE8, IE9, Chrome 5, Chrome 10, Firefox 3.6.16, Firefox 4, Safari 5, Opera 11
*/
 
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
//Turn of Apache output compression
// Necessary if you have gzip setup in your httpd.conf (e.g. LoadModule deflate_module modules/mod_deflate.so)
apache_setenv('no-gzip', 1);
ini_set('zlib.output_compression', 0);
 
//Disable all PHP output buffering
ini_set('output_buffering', 'Off');
ini_set('implicit_flush', 1);
ob_implicit_flush(1);
 
for ($i = 0, $level = ob_get_level(); $i < $level; $i++) { ob_end_flush(); } //Flush all levels of the buffer to start
 
error_reporting(E_ALL);
 
?>

  Comet php backend




 
$startTime = time();
$maxLoopTime = 10;
 
while(time()-$startTime < $maxLoopTime) {
 
	echo '\r\n";
 
	flush();
 
  	$randSleep = mt_rand(100000, 2000000); //sleep between 100 ms and 2 seconds
	usleep($randSleep);
}
 
?>

ExtJs4 Component References

Andrew — Sun, 03 Apr 2011 17:58:15 +0000

Ext4 has replaced the "ref" method of referencing components with a supposedly much more powerful mechanism called Ext.ComponentQuery. While it may be more powerful, I've never been a fan of internal selector engines.

For example, John Resig details the technical side of a Twitter performance issue related to a change in the jquery selector engine. So I argue- why even bother with a selector engine if you don't need it.

The best thing about ref is that involves no querying whatsoever, the references are saved immediately, and can be utilized immediately with no performance penalty. While Ext.ComponentQuery probably has a very negligible performance penalty, it is always a good idea to make your javascript as fast as possible.

Here I introduce the new version of Ext.ux.componentReference.js compatible with ExtJs4. This doesn't seem to be a catch-all because it doesn't work with toolbars as well as the old version did, but I will look into that when the final version of ExtJs4 comes out.

Ext4.ux.componentReference.js

Ext.AbstractComponent.prototype.onAdded = Ext.Function.createSequence(Ext.AbstractComponent.prototype.onAdded, function(){
 
    if(this.refO && this.itemId ){
        this.refO[this.itemId] = this; 
    }else if(this.ownerCt && this.ownerCt.refO ){
 
        if(this.itemId ){
            this.ownerCt.refO[this.itemId] = this; 
        }
        if( !this.refO ){
            this.refO = this.ownerCt.refO; 
        }
    }
});

IE9 + ClearType = Blurry Web Apps

Andrew — Mon, 14 Feb 2011 17:55:01 +0000

The first thing I noticed with the latest IE9 beta (9.0.7930.16406) was that somehow cleartype was enabled. This was particularly surprising because the first thing I do after a fresh Windows install is disable cleartype. Luckily, for my operating system, I can disable cleartype, so I immediately began searching for the option in IE9. I found the option: Options > Advanced > Multimedia section > “Always use ClearType for HTML”, but it was already unchecked.

That’s right, the current IE9 beta has cleartype permanently enabled!

For anyone who runs a monitors at the native resolution, this causes text to look blurry. If you have a high DPI monitor (such as on my notebook) the effect is even worse!

The most interesting aspect of this issue, is the fact that when I enable ClearType in my operating system and view the same page in firefox, it still looks better than in the IE9 beta.

For small text, this is a killer. Take a look at this example of a web app rendered in Firefox without cleartype, IE9, and finally Firefox with ClearType enabled on the operating system:

This is apparently not the first time this has happened either. Windows Presentation Foundation had similar issues with “broken” cleartype.

I really hope that Microsoft doesn’t force this blurry type on me with IE9′s final release. Even with the prospect of a fixed version of cleartype on the horizon al a WPF, I would still greatly prefer the ability to disable ClearType altogether.

Pseudo Zoom Quilt with Javascript

Andrew — Tue, 21 Dec 2010 20:16:00 +0000

I saw a post on Reddit where a someone was wondering if you could create something similar to Zoom Quilt with HTML5 and JavaScript. It doesn't require HTML5, but it can easily be done with some simple JQuery. This is even IE6 compatible to boot!

View the Full Size Demo Here

Dealing with references to components

Andrew — Sat, 09 Oct 2010 02:47:24 +0000

NOTE: I also created an Ext4 compatible version of this!

Keeping track of components in a large web apps gets harder as both the components and web apps grow. One issue with large components is that any individual piece of the component may need to be aware of other child or sibling pieces. An example of this would be if you have a save button in your component and when it is clicked, a text field must have its value validated before the save action takes place. The save button needs to be able to easily access the text field. I will demonstrate a simple and easy way to keep track of all of your components and child components with a small extension I created called Ext.ux.componentReference.

Rahul Singla has a great breakdown of the abilities provided by Ext to save component references. Rahul also provides a solution that this extension is loosely based from.

id is almost always the least preferable option. You need to make sure manually that all items on the page whose ids are explicitly set by you are unique, which becomes quite difficult to ensure as the size and number of developers on the project increase.

itemId allows you to specify an id which is scoped locally for the container of the Component. However, if you have many deeply nested containers and components, getting your hands to a component considerably down in the hierarchy from a container listener function pretty up again becomes troublesome.

ref allows you to place a named reference to the Component along Container axis, and again requires you to navigate between container/component axis, which becomes complex as nesting increases. Moreover, the approach is unmaintainable if you later need to introduce an extra Container, which would force you to update all named ref instances placed below the new container added, as well as update javascript all over which used these named references.

As Rahul states, the id approach is the least attractive method for referencing a component. Id values are defined globally throughout any given web page. If you need two of the same component on the same web page, you will have two components which share the same id values. This will cause issues because one id value will reference multiple components of different component instances.

The itemId approach is better because you have a localized identity value that can be referenced easily if you are aware of the component hierarchy.

The ref approach is the most flexible because you are able to place a reference in the parent component of your choosing using the '../../' notation, but this and the itemId approach both suffer from the same drawback in that they require knowledge of the parent component or component hierarchy.

Now I would like to introduce my approach, which I call Ext.ux.componentReference. Create a javascript file named Ext.ux.componentReference.js and place this code into it:

Ext.Component.prototype.initComponent = Ext.Component.prototype.initComponent.createSequence(function(){
    if(this.refO && this.itemId ){ 
        this.refO[this.itemId] = this; 
    }else if(this.ownerCt && this.ownerCt.refO ){ 
        if(this.itemId ){ 
            this.ownerCt.refO[this.itemId] = this; 
        }
        if( !this.refO ){ 
            this.refO = this.ownerCt.refO; 
        }
    }
});

Now with some comments:

Ext.Component.prototype.initComponent = Ext.Component.prototype.initComponent.createSequence(function(){
    if(this.refO && this.itemId ){ //does the reference object and itemId exist?
        this.refO[this.itemId] = this; //save reference to component
    }else if(this.ownerCt && this.ownerCt.refO ){ //does owner have a reference object set?
        if(this.itemId ){ //is the itemId set?
            this.ownerCt.refO[this.itemId] = this; //save reference to component
        }
        if( !this.refO ){ //if the reference object is not set here, copy the parents down the component hierarchy
            this.refO = this.ownerCt.refO; //save reference to owner container's reference object so you can easily nest references very deep
        }
    }
});

Upon instantiation of any component, this function will now be called before the component's initComponent function. You can read about how this works in the Ext Documentation under function -> createSequence. If any component (or it's parent) has the property "refO" (which must point to an object), any component (or it's children) with the property "itemId" will have a reference saved in "refO".

Here is an example:






 
 
 
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/inc/img/s.gif';
 
testPanel = Ext.extend(Ext.Panel, {
	panelRef: {}
	,initComponent:function(){
 
		Ext.apply(this,{
		  	title:'Test Panel'
		  	,refO:this.panelRef
                        ,frame:true
                        ,width:200
                        ,height:200
                        ,layout:'absolute'
		  	,items:[{
		  		xtype:'button'
		  		,text:'Button 1'
		  		,itemId:'button1'
		  		,x:20
		  		,y:10
		  		,icon:'/inc/img/disk.png'
		  		,scope:this
		  		,handler:function(){
		  			Ext.Msg.alert('Button 1 Clicked!','The path to the icon of this button 2 is: '+this.panelRef['button2'].icon);
		  		}
		  	},{
		  		xtype:'button'
		  		,text:'Button 2'
		  		,itemId:'button2'
                                ,x:20
                                ,y:50
		  		,icon:'/inc/img/tick.png'
		  		,scope:this
		  		,handler:function(){
		  			Ext.Msg.alert('Button 2 Clicked!','The path to the icon of this button 1 is: '+this.panelRef['button1'].icon);
		  		}
		  	},
		  	new Ext.Button({
				text:'Button 3'
				,refO:this.panelRef
				,itemId:'button3'
				,x:20
				,y:90
				,icon:'/inc/img/cross.png'
				,scope:this
				,handler:function(){
					Ext.Msg.alert('Button 3 Clicked!','The path to the icon of this button 2 is: '+this.panelRef['button2'].icon);
				}
		  	})
		  	]
		});
		testPanel.superclass.initComponent.call(this);
	}
 
});
 
Ext.onReady(function(){
 
  testPanelInstance = new testPanel({
  	renderTo:document.body
  });
 
});
script>

While the result is unimpressive, the effect is powerful.

In this example we are referencing the 'icon' property of button1 from button2 and vice versa. Because the variable "this.panelRef" is now in scope within the entire testPanel component, this task becomes trivial.

Copying Files from a network Share to a Droid X

Andrew — Sun, 01 Aug 2010 01:34:35 +0000

I will show you how to copy files from a windows file share to/from a Verizon/Motorolla Droid X.

1) Click the app launcher button

2) Open the “Files” app

3) Select “Shared folders”

4) Add Server if you don’t have one setup. If you are already setup, click the server.

5) Browse to the file or folder you want to copy to your droid and long press on it.

6) Select “Copy”

7) NOTICE the “Paste here” button is available. Don’t press it yet!

Press the back button until you see “Phone files”. Select it!

9) If you want, create a “New folder”.

10) If you are creating a folder, enter the name, click OK.

11) Press the “Paste here” button

12) You will see the file copy indicator appear in the notification bar. Pull down the notifications area to see the individial file copy progress.

After the last file is copied the file or folder you just copied will show up!

Installing PHP Gearman module on Ubuntu 10.4 (Lucid)

Andrew — Mon, 19 Jul 2010 04:21:15 +0000

Linux is really crazy. I’m used to Windows. On windows, I download a program, and run it. If it doesn’t work- the program is broken. Maybe I can download a newer/older version, but for all intents and purposes that is all there is to it. But with Linux- you can usually get something to work, but it takes a lot of time and sleuthing. I definitely prefer the windows workflow. But hey- it’s free as in freedom, right?

I was trying to install the PHP Gearman module, but I kept getting compilation errors. Here is how I fixed it!

Gearman is a distributed job system written and released by the good folks at Danga Interactive. (They also made memcache). I setup a blank Ubuntu server and I wanted to test it out, but it didn’t go so well.

Here is the standard procedure:
apt-get update
apt-get install php5-cli php5-dev pear
apt-get install gearman-job-server libgearman2 libgearman-dev gearman-tools
pecl install “channel://pecl.php.net/gearman-0.7.0″

Usually the pecl command magically compiles php modules, but this time it did not.

This post details doing the following:

1) Install the libevent-dev libuuid-dev packages

2) Modify a libuuid files for some changes made to debian regarding .la files

3) Install the gearman repositories for apt to download the latest version of libgearman

First I had some missing dependencies.

so I needed to install the event and uuid libs:
apt-get install libevent-dev uuid-dev

pecl install “channel://pecl.php.net/gearman-0.7.0″
——————-
running: make
/bin/bash /var/tmp/pear-build-root/gearman-0.6.0/libtool –mode=compile cc -I.
-I/tmp/pear/temp/gearman -DPHP_ATOM_INC -I/var/tmp/pear-build-root/gearman-0.6.0/include
-I/var/tmp/pear-build-root/gearman-0.6.0/main -I/tmp/pear/temp/gearman -I/usr/include/php5
-I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext
-I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g -O2 -Wall -c
/tmp/pear/temp/gearman/php_gearman.c -o php_gearman.lo
libtool: compile: cc -I. -I/tmp/pear/temp/gearman -DPHP_ATOM_INC
-I/var/tmp/pear-build-root/gearman-0.6.0/include -I/var/tmp/pear-build-root/gearman-0.6.0/main
-I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM
-I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g
-O2 -Wall -c /tmp/pear/temp/gearman/php_gearman.c -fPIC -DPIC -o .libs/php_gearman.o
/bin/bash /var/tmp/pear-build-root/gearman-0.6.0/libtool –mode=link cc -DPHP_ATOM_INC
-I/var/tmp/pear-build-root/gearman-0.6.0/include -I/var/tmp/pear-build-root/gearman-0.6.0/main
-I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM
-I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H
-g -O2 -Wall -o gearman.la -export-dynamic -avoid-version -prefer-pic -module -rpath
/var/tmp/pear-build-root/gearman-0.6.0/modules php_gearman.lo -lgearman
libtool: link: cc -shared .libs/php_gearman.o /usr/lib/libgearman.so -pthread -Wl,-soname
-Wl,gearman.so -o .libs/gearman.so
/bin/sed: can’t read /usr/lib/libuuid.la: No such file or directory
libtool: link: `/usr/lib/libuuid.la’ is not a valid libtool archive

so now that I have uuid, I’m still getting errors. I found a great blog post that helped me with this error!

After some googling, it turns out that .la files are now gone from many packages, as per this post on debian-devel list. Couldn't really find a good solution for this, so here it is:

Open /usr/lib/libgearman.la as root, and find a line that says:
dependency_libs=' -L/usr/lib /usr/lib/libuuid.la'

Replace it with:
dependency_libs=' -L/usr/lib -luuid'

Now, it should work, right? AAAAAAAAALMOST, but not quite.

sudo pecl install “channel://pecl.php.net/gearman-0.7.0″
————————————————-
running: make
/bin/bash /var/tmp/pear-build-root/gearman-0.7.0/libtool –mode=compile cc -I.
-I/tmp/pear/temp/gearman -DPHP_ATOM_INC -I/var/tmp/pear-build-root/gearman-0.7.0/include
-I/var/tmp/pear-build-root/gearman-0.7.0/main -I/tmp/pear/temp/gearman -I/usr/include/php5
-I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext
-I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g -O2 -Wall -c
/tmp/pear/temp/gearman/php_gearman.c -o php_gearman.lo
libtool: compile: cc -I. -I/tmp/pear/temp/gearman -DPHP_ATOM_INC
-I/var/tmp/pear-build-root/gearman-0.7.0/include -I/var/tmp/pear-build-root/gearman-0.7.0/main
-I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM
-I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g
-O2 -Wall -c /tmp/pear/temp/gearman/php_gearman.c -fPIC -DPIC -o .libs/php_gearman.o
In file included from /tmp/pear/temp/gearman/php_gearman.c:24:
/usr/include/libgearman/gearman.h:28:19: error: event.h: No such file or directory
/tmp/pear/temp/gearman/php_gearman.c: In function ‘zm_startup_gearman’:
/tmp/pear/temp/gearman/php_gearman.c:4467: error: ‘GEARMAN_VERBOSE_NEVER’ undeclared (first use in
this function)
/tmp/pear/temp/gearman/php_gearman.c:4467: error: (Each undeclared identifier is reported only once
/tmp/pear/temp/gearman/php_gearman.c:4467: error: for each function it appears in.)
make: *** [php_gearman.lo] Error 1
ERROR: `make’ failed
————————————————-

Next I found there is some kind of issue with libgearman in debian. You have to install the latest version of gearman directly from the creators to fix this one.

Add the gearman sources to your /etc/sources.list file:
————————————————-
deb http://ppa.launchpad.net/gearman-developers/ppa/ubuntu lucid main
deb-src http://ppa.launchpad.net/gearman-developers/ppa/ubuntu lucid main
————————————————-
Add their key so apt can verify their packages:
sudo apt-key adv –keyserver keyserver.ubuntu.com –recv-keys 1C73E014

update apt and re-install all the gearman packages:
apt-get update
apt-get install gearman-job-server libgearman2 libgearman-dev gearman-tools

Rejoice!!

pecl install “channel://pecl.php.net/gearman-0.7.0″
————————————————-
running: make
/bin/bash /var/tmp/pear-build-root/gearman-0.7.0/libtool –mode=compile cc -I. -I/tmp/pear/temp/gearman -DPHP_ATOM_INC -I/var/tmp/pear-build-root/gearman-0.7.0/include -I/var/tmp/pear-build-root/gearman-0.7.0/main -I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g -O2 -Wall -c /tmp/pear/temp/gearman/php_gearman.c -o php_gearman.lo
libtool: compile: cc -I. -I/tmp/pear/temp/gearman -DPHP_ATOM_INC -I/var/tmp/pear-build-root/gearman-0.7.0/include -I/var/tmp/pear-build-root/gearman-0.7.0/main -I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g -O2 -Wall -c /tmp/pear/temp/gearman/php_gearman.c -fPIC -DPIC -o .libs/php_gearman.o
/bin/bash /var/tmp/pear-build-root/gearman-0.7.0/libtool –mode=link cc -DPHP_ATOM_INC -I/var/tmp/pear-build-root/gearman-0.7.0/include -I/var/tmp/pear-build-root/gearman-0.7.0/main -I/tmp/pear/temp/gearman -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib -DHAVE_CONFIG_H -g -O2 -Wall -o gearman.la -export-dynamic -avoid-version -prefer-pic -module -rpath /var/tmp/pear-build-root/gearman-0.7.0/modules php_gearman.lo -lgearman
libtool: link: cc -shared .libs/php_gearman.o /usr/lib/libgearman.so -pthread -Wl,-soname -Wl,gearman.so -o .libs/gearman.so
libtool: link: ( cd “.libs” && rm -f “gearman.la” && ln -s “../gearman.la” “gearman.la” )
/bin/bash /var/tmp/pear-build-root/gearman-0.7.0/libtool –mode=install cp ./gearman.la /var/tmp/pear-build-root/gearman-0.7.0/modules
libtool: install: cp ./.libs/gearman.so /var/tmp/pear-build-root/gearman-0.7.0/modules/gearman.so
libtool: install: cp ./.libs/gearman.lai /var/tmp/pear-build-root/gearman-0.7.0/modules/gearman.la
libtool: finish: PATH=”/usr/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/X11R6/bin:/sbin” ldconfig -n /var/tmp/pear-build-root/gearman-0.7.0/modules
———————————————————————-
Libraries have been installed in:
/var/tmp/pear-build-root/gearman-0.7.0/modules
————————————————-

Now you just have to make sure that php.ini contains:

extension=gearman.so

If this saved you some time. Leave me a comment, and I’ll post more of my boring linux adventures!

Ext JS and Canvas integration

Andrew — Mon, 12 Jul 2010 16:19:53 +0000

Ext JS and Canvas can be used together very easily. One just needs to understand how Ext uses elements and how to gain access to the underlying DOM.

Here is an example of a canvas element embedded in an Ext Panel:

//draw function from https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
function draw(el) {
  var canvas = el;
  var ctx = canvas.getContext("2d");
 
  ctx.fillStyle = "red";
 
  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
  ctx.lineTo(30, 30);
  ctx.fill();
}
 
Ext.BLANK_IMAGE_URL = '/inc/js/ext-3.2.1/resources/images/default/s.gif';
 
Ext.onReady(function(){
 
canvasPanel = new Ext.Panel({
	title:'Ext JS Canvas Panel'
	,height:200
	,width:400
	,frame:true
	//,renderTo:'ext-canvas-container' //NOTICE: renderTo does not work because the var canvasPanel will not be available in the renderer yet
	,items:{
		xtype: 'box',
		autoEl:{
			tag: 'canvas'
			,height:150
		}
		,listeners:{
			render:{
				scope:this
				,fn:function(){
					draw(canvasPanel.items.items[0].el.dom);
				}
			}
		}
	}
});
canvasPanel.render('ext-canvas-container');
 
});

You can also do the same thing with an Ext style window using the Ext.Window class.

Ext.onReady(function(){
 
	canvasWindow = new Ext.Window({
		title:'Ext JS Canvas Window'
		,height:200
		,width:400
		,items:{
			xtype: 'box',
			autoEl:{
				tag: 'canvas'
				,height:150
			}
			,listeners:{
				render:{
					scope:this
					,fn:function(){
						draw(canvasWindow.items.items[0].el.dom);
					}
				}
			}
		}
	});
 
	canvasWindowButton = new Ext.Panel({
		renderTo:'ext-canvas-window-button-container'
		,frame:true
		,width:400
		,height:150
		,items:{
			xtype:'button'
			,width:300
			,text:'Launch Ext Canvas Window'
			,handler:function(){
				canvasWindow.show();
			}
		}
	});
});