This is something I’ve been trying to get working for ages but had thought it was impossible.  I’ve seen several ext+air examples using custom chromes, but they all used standard square looking viewports (SimpleTasks2, ExtPlayer).  They look nice, but I think with Ext & AIR we have the potential for a bit more ‘wow’ factor.

What I wanted was an application that frees itself of the standard Adobe AIR chrome (right) in favor of an Ext.Window panel that ‘floats’ on the desktop with the sexy rounded corners, transparency and drop shadows that makes it look so great in web apps.

My first idea was to create an AIR application window slightly bigger than an ext window, then add custom drag functions to the ext window that would move the chromeless background with it.  This actually worked, but not too well, in that if you dragged too quickly you’d move outside of the window and lose the drag.  So that idea had to be scrapped.

The solution, I’ve found, is to do the following:

1. Set the AIR application to be transparent and chromeless in the app xml
2. On app load, call air.NativeApplication.nativeApplication.activeWindow.maximize();
   This will obviously stretch the transparent application window to the full width and height of the screen, providing a nice transparent area for your ext js window to live in.  If you click anywhere in that transparent area it gives focus to the application behind it (or the desktop) so usability wise it acts just like a native application window, only sexier. The one caveat of this method is your ext window can only reside on one monitor, which could be a deal breaker for some but for the client I’m working on this for multi monitor support is not an issue.
3. Create an ext window, setting custom minimise and close handlers to minimise and exit the application respectively.

Window instantiation code:

/** new namespace for our application */
Ext.ns('App');

/** maximise our application on load */
air.NativeApplication.nativeApplication.activeWindow.maximize();

/** on ext ready */
Ext.onReady(function() {

        /** create new app window */
        App.window = new Ext.Window({
                layout      	: 'fit'
                width       	: 1000,
                height      	: 500,
                maximizable	: true,
                title         	:  'Ext Custom Chrome App',
                minimizable	: true,
                minimize	: function()
                {
                        air.NativeApplication.nativeApplication.activeWindow.minimize();
                },
                resizable	: true,
                collapsible	: true,
                close	: function()
                {
                        air.NativeApplication.nativeApplication.exit();
                }
        });

        /** set a slight delay on showing the app window to give the app time to maximise before showing the window */
        setTimeout('App.window.show();', 100);    

});

I think the results are pretty stunning, and can make a relatively standard looking desktop app into something more impressive.