To coincide with the release of Adobe&apos;s AIR v1.0, the Ext team <a href="http://extjs.com/blog/2008/02/24/tasks2/">released v2.0.2 of the Ext framework</a> with enhanced support for the new <a href="http://adobe.com/go/air">AIR runtime</a>. The Ext and Adobe teams collaborated during the AIR beta process to ensure that support for the updated AIR API and security sandbox would be available to Ext users from day one.

To demonstrate Ext&apos;s AIR capabilities, founder <a href="http://jackslocum.com/blog/">Jack Slocum</a> went about updating the Simple Tasks application he initially created during the early AIR beta process.


<a href="http://extjs.com/blog/2008/02/24/tasks2/"><img src="http://extjs.com/playpen/simple-tasks.gif" alt="" border="0" width="475" height="298"/></a>

Making extensive use of the newly updated AIR API, the Ext team enhanced the Ext.air package to handle such functionality as:

<ul>

	<li>Managing native windows, event listeners and automatic state management for the windows.</li>

 	<li>Use of the new synchronous database access introduced in AIR beta 3.</li>

	<li>Native drag and drop and clipboard access.</li>

	<li>Playing sounds.</li>

	<li>Minimizing AIR applications to the system tray.</li>

</ul>

Adding an icon to the system tray is now a trivial task as can be seen in this code sample:

[javascript]
var win = new Ext.air.NativeWindow({
    id: &apos;mainWindow&apos;,
    instance: window.nativeWindow,
 
    // System tray config
    minimizeToTray: true,
    trayIcon: &apos;ext-air/resources/icons/extlogo16.png&apos;,
    trayTip: &apos;Simple Tasks&apos;,
    trayMenu : [{
        text: &apos;Open Simple Tasks&apos;,
        handler: function(){
            win.activate();
        }
    }, &apos;-&apos;, {
        text: &apos;Exit&apos;,
        handler: function(){
            air.NativeApplication.nativeApplication.exit();
        }
    }]
});
[/javascript]


In addition to demonstrating AIR apis, Simple Tasks v2 also includes several advanced samples to demonstrate creating custom Ext components. These samples include:


<strong>ListTree</strong> - Allows for a hierarchical list of options, similar to a treeview, but within a drop-down listbox<br />
<div style="padding:20px 0;">
<a href="http://extjs.com/blog/2008/02/24/tasks2/"><img src="http://extjs.com/playpen/screenshots/air/treelist.png" alt="" border="0" width="302" height="280"/></a>

</div>

<strong>Custom Grid Columns</strong> - Allows for grid columns to be represented as buttons or menus

<div style="padding:20px 0;">
<div style="width:320px;float:left;">
<a href="http://extjs.com/blog/2008/02/24/tasks2/"><img src="http://extjs.com/playpen/screenshots/air/column2.png" /></a>

</div>
<div style="clear:left;"></div>
</div>

<strong>Switch</strong> - Provides a collection of buttons, one of which can be "pressed" at a time. This is used as an alternative for radio buttons.


<div style="padding:20px 0;">
<div style="width:320px;float:left;">
<a href="http://extjs.com/blog/2008/02/24/tasks2/"><img src="http://extjs.com/playpen/screenshots/air/switch.png" alt="" border="0" width="151" height="112"/></a>

</div>
<div style="clear:left;"></div>
</div>

<a href="http://extjs.com/blog/2008/02/24/tasks2/">Ext v2.0.2</a> is immediately <a href="http://extjs.com/download">available for download</a> as is <a href="http://adobe.com/go/air">Adobe AIR v1.0</a>