Simple Tasks v2 - Multiple lists, NativeWindows and Reminders
February 24, 2008 by Jack Slocum
In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality in AIR and gained some cool custom Ext components that can be used outside of AIR.
AIR APIs
First, lets cover some of the AIR APIs that were used:
NativeWindow
This was one of the most useful additions to the Ext.air package. It provides an API to create windows, manage those windows, listen for events like standard Ext Observables and automatic state management for the windows.
var win = new Ext.air.NativeWindow({ id: winId, file: 'task.html', width:500, height:350, resizable: true });
Ext.sql.*
The Ext.data.Store/Record and AIR Sqlite API got an upgrade from the asynchronous database access in the early AIR betas to the synchronous database access introduced in AIR beta 3.
Simple Tasks demonstrates the ease of integration of Ext with Sqlite, using automatic persistence Ext.data.Record instances (e.g. Tasks or Lists) in the database.
tx.data.ListStore = Ext.extend(Ext.data.Store, { constructor: function(){ // superclass call tx.data.ListStore.superclass.constructor.call(this, { sortInfo:{field: 'listName', direction: "ASC"}, reader: new Ext.data.JsonReader({ id: 'listId', fields: tx.data.List }) }); this.conn = tx.data.conn; // Ext.sql.Proxy for managing Sqlite persistence this.proxy = new Ext.sql.Proxy(tx.data.conn, 'list', 'listId', this); }, ...
Native Drag and Drop and Clipboard
Simple Tasks v2 supports dragging any text from any application into the grid to automatically create a new task. You can also paste text from the system clipboard as a new task. However, one of the coolest features is the ability to drag tasks straight from Outlook into Simple Tasks.
Minimize to System Tray
After the initial release of Simple Tasks, one of things most requested internally here as Ext JS (yes, we actually use it!) was the ability to minimize to the windows System Tray. We added support to automatically manage the System Tray functionality to the Ext.air.NativeWindow class, so now minimizing to the system tray is as simple as setting a config option.
var win = new Ext.air.NativeWindow({ id: 'mainWindow', instance: window.nativeWindow, // System tray config minimizeToTray: true, trayIcon: 'ext-air/resources/icons/extlogo16.png', trayTip: 'Simple Tasks', trayMenu : [{ text: 'Open Simple Tasks', handler: function(){ win.activate(); } }, '-', { text: 'Exit', handler: function(){ air.NativeApplication.nativeApplication.exit(); } }] });
Sound
AIR also supports playing sounds. Ext.air.Sound makes that even easier.
Ext.air.Sound.play('beep.mp3');
Ext Custom Components
As noted above, the Simple Tasks application also features some useful samples of custom components in Ext. Some of them were specifically designed to be reusable and may be included as standard Ext components or samples in a future release.
ListTree
This component is similar to a ComboBox or SelectBox except the list of the component is backed by an Ext TreePanel. It makes display and selection within a hierarchical list much more intuitive than a standard flattened list.
Another cool sample that goes along with this component is a custom selection model “ActivationModel”. As the name may suggest, it support 2 forms of selection - activation and selection. With activation, the component supports full keyboard navigation, expand/collapse with the keyboard and unlike the standard tree selection model, selection is an action on it’s own.
Custom Grid Columns
The easiest way to explain is with screenshots.
Switch Button
This component is like a radio button seen commonly in desktop applications. It was named “Switch” Button so it wasn’t confused with the radio buttons already found in standard HTML. It provides a collection of buttons, one of which can be “pressed” at a time.
Summary
From AIR specific functionality to Ext extras, there are quite a few real world samples present in the Simple Tasks v2 application. If you are using Ext, I would highly recommend taking a look at the source.
- The full source can be found in the Ext 2.0.2 distribution under air/samples/tasks.
- Adobe AIR 1.0 can be downloaded here.
- The Simple Tasks v2 AIR application can be downloaded here.
- You can read about the first version of Simple Tasks in the original blog post.
Posted on February 25th, 2008 at 12:23 am
Jack, this is very nice. Thanks for the post. I’ll be sure to check out the new samples.
Posted on February 25th, 2008 at 2:39 am
Wonderful addition!
It would be very nice to have the Custom Grid Columns, ListTree and Switch button Examples to work with the default-nonAir-Version of Ext (maybe already possible? I havent found anything like that in the online-docs for 2.02 or example pages. Very good work! Keep it up 
Posted on February 25th, 2008 at 2:55 am
Jack,
Truly an amazing application! You continue to push the boundaries of what’s possible. I’m blown away.
Rob Christensen
Adobe AIR Team
Posted on February 25th, 2008 at 3:07 am
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on February 25th, 2008 at 3:47 am
Can it get any better?…
Nice, all I have to do now in order to complete my app is to rewrite the whole code…
Posted on February 25th, 2008 at 3:56 am
Hi Jack,
I get this following error when I try to add new task.
“[app:/main.html][09:48:09] SQLError: ‘Error #3122′, details:’null’, operation:’execute”
Screenshot is here:
Posted on February 25th, 2008 at 3:57 am
Ok! HTML doesn’t work.
Here is the url of screenshot:
http://www.jotform.com/uploads/serkan/71334141967/69735204882488227/Picture%202.png
Posted on February 25th, 2008 at 4:15 am
Awesome! I will definitely take a look at Ext 2.0.2. for updating Ora Time and Expense which has also been updated to Adobe AIR 1.0
Posted on February 25th, 2008 at 5:13 am
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on February 25th, 2008 at 5:20 am
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on February 25th, 2008 at 6:08 am
That looks really fantastic.
Thanks Jack
Posted on February 25th, 2008 at 7:14 am
Didn’t work also for me:
[app:/main.html][12:14:53] SQLError: ‘Error #3122′, details:’null’, operation:’execute’
Why?
Posted on February 25th, 2008 at 8:43 am
[…] Slocum posted an update to the Simple Tasks example application to the Ext blog this morning. This is an example app using Ext 2.0.2 as well as Adobe AIR. With […]
Posted on February 25th, 2008 at 9:10 am
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on February 25th, 2008 at 9:15 am
[…] coincide with the release of Adobe’s AIR v1.0, the Ext team released v2.0.2 of the Ext framework with enhanced support for the new AIR runtime. The Ext and Adobe teams collaborated during the AIR […]
Posted on February 25th, 2008 at 9:36 am
[…] AIR dès sa sortie. Pour vous informer sur les nouveautés, vous pouvez toujours vous rendre sur le site officiel. Sinon, la page de téléchargement vous tend les […]
Posted on February 25th, 2008 at 9:49 am
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on February 25th, 2008 at 10:09 am
[…] a bibliotecas JS: A maioria das grandes bibliotecas Ajax incluindo jQuery, Ext JS, Dojo, e Spry, onde podem ser usadas para construir aplicações AIR. Adobe AIR integrando […]
Posted on February 25th, 2008 at 10:30 am
serkanyersen: I got the same error initially — I’m going to guess you’re running Vista, and installed the app to the Program Files directory. Try launching it as an administrator; it should work fine then. It looks to be a permissions bug with updating the database. Hopefully Jack can find a fix for it…
Posted on February 25th, 2008 at 10:59 am
Wow Jack,
You and the EXT team continue to push the envelope!
Gary
Posted on February 25th, 2008 at 11:30 am
Thanks everyone! For those having the issue with adding a folder/list, I’ve uploaded a new version that should correct it on all platforms.
Posted on February 25th, 2008 at 12:00 pm
Will you guys build a Aptana plugin?
Posted on February 25th, 2008 at 1:22 pm
[…] JavaScript : certains frameworks Ajax peuvent être utilisés dans les applications AIR (JQuery, Ext JS, Dojo, Spry). Adobe AIR supporte le JavaScript et l’ActionScript et permet un rendu des […]
Posted on February 25th, 2008 at 1:31 pm
[…] coincide with the release of Adobe’s AIR v1.0, the Ext team released v2.0.2 of the Ext framework with enhanced support for the new AIR runtime. The Ext and Adobe teams collaborated during the AIR […]
Posted on February 25th, 2008 at 1:50 pm
[…] Обновился термоядерный javascript фреймворк extjs. Одно из главных обновлений более тесная интеграция с AIR runtime. В модуль Ext.air добавлен следующий функционал: […]
Posted on February 25th, 2008 at 2:11 pm
thanks for your work!
this’s awesome yet pretty!
Posted on February 25th, 2008 at 2:36 pm
Its awesome but take a lot of memory (> 51MB). I’m a developer looking forward to Ext + Adobe AIR but with this kind of memory usage, I’m afraid the user might not persistently use it.
Will the memory usage go down with subsequent releases (how?).
Posted on February 25th, 2008 at 2:39 pm
[…] You can see AIR 1.0 and ExtJS in action by downloading this great (and actually useful) task management application: ExtJS in action - Simple Tasks 2 (AIR application) http://extjs.com/playpen/STasks2.air More information […]
Posted on February 25th, 2008 at 3:29 pm
[…] As usual there are quite a few bug fixes, and some nice refactorization. This release also includes a whole bunch of new code to aid with developing an Adobe AIR app with Ext. Jack has spent a great deal of time over the past few months to build some nice wrappers and make using Ext with Air amazingly simple. Jack wrote a lengthly blog post that goes into detail about all the cool new Air components over on the official Ext blog. […]
Posted on February 25th, 2008 at 5:03 pm
just took a look at the Proxy class, seems it does not support multiple tabes inner join select
Posted on February 25th, 2008 at 6:55 pm
[…] Ext Blog findet man eine aktualisierte Version von Simple Tasks - ein Demo von ExtJS, dass die Adobe AIR Unterstützung von ExtJS […]
Posted on February 25th, 2008 at 6:55 pm
Great… 2.0.2 seems to work so far with no changes to my existing code. Really looking forward to using the “Switch Button” , I was already doing the same within one of my “card” views, but the toggle logic was not complete.
Posted on February 25th, 2008 at 10:59 pm
[…] Ext JS Blog - » Simple Tasks v2 - Multiple lists, NativeWindows and Reminders - In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality in AIR a […]
Posted on February 26th, 2008 at 2:16 am
[…] Megjelent az ExtJS 2.0.2-es verziója, amely támogatja az Adobe AIR alkalmazások készítését. Jack emellett frissítette az ExtJS-es példaalkalmazását, a Simple Task Managert. […]
Posted on February 26th, 2008 at 3:57 am
Hi Jack,
New update fixed that error. However, it still fails “silently” on any of the DB operation.
I’m on a mac os x leopard.
Posted on February 26th, 2008 at 6:40 am
Still don’t work on leopard
[app:/main.html][12:14:53] SQLError: ‘Error #3122′, details:’null’, operation:’execute’
Posted on February 26th, 2008 at 7:29 am
[…] γνωστή βιβλιοθήκη έφτασε στην έκδοση 2.0.2 και πλέον υποστηρίζει AIR […]
Posted on February 26th, 2008 at 8:00 am
[…] was a big day for those contemplating taking Adobe AIR out for a spin. Ext, YUI, and Dojo all now have support for the runtime. Pete Freitag posted a hello world tutorial on […]
Posted on February 26th, 2008 at 9:39 am
Works on Leopard for me with the latest download of Air.
Posted on February 26th, 2008 at 11:02 am
It seems that (most of) the examples on extjs.com don’t work any more.
Error reported:
Ext.isArray is not a function
http://extjs.com/deploy/dev/ext-all.js
Line 14
Posted on February 26th, 2008 at 2:37 pm
Jack, this is amazing.
I think its missing a sync mechanism
or ability to use a remote database.
great work.
Posted on February 26th, 2008 at 7:02 pm
Michael, can you give any more info? I am unable to duplicate the issue (I tried every sample for the homepage). Thanks!
Posted on February 26th, 2008 at 7:21 pm
[…] el ejemplo Ext 2.0.2 + Simple Tasks v2 for AIR 1.0, se ve bastante […]
Posted on February 26th, 2008 at 8:28 pm
Perfect!~slowly study!~
Posted on February 27th, 2008 at 1:19 am
This framework is growing faster then I can get use of it. Great Work!
Posted on February 27th, 2008 at 2:05 am
[…] We use it extensively at work and we are quite happy with it. I just wanted to point out that the 2.0.2 version of Ext has come out. This release was mostly related to the new Adobe AIR 1.0 that was recently […]
Posted on February 27th, 2008 at 6:14 am
Ext Releases v2.0.2 with Adobe AIR Support…
[…]In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality …
Posted on February 27th, 2008 at 5:39 pm
[…] Ознакомиться с оригинальной статьей в блоге на ExtJS.com […]
Posted on February 28th, 2008 at 9:39 pm
[…] Simple Tasks v2 – Multiple lists, NativeWindows and Reminders Ext 2.0.2 配合 AIR 推出，此為介紹新功能的例子 […]
Posted on February 29th, 2008 at 5:44 pm
re: some of the comments above re: “Aptana plugin” and “calling remote database”, check out the Aptana Jaxer screencast that extends Jack’s Adobe AIR demo for Ext to address both of those questions.
View the screencast at: http://www.aptana.com/node/297
Posted on March 4th, 2008 at 3:08 am
I like it .
Posted on March 6th, 2008 at 11:23 am
[…] Simple Tasks v2 - Multiple lists, NativeWindows and Reminders (tags: air javascript extjs interesting) […]
Posted on March 6th, 2008 at 6:15 pm
Great!
Is it possible to make tasks hierarchy?
Or Grid component doesn’t let it?
Thanks!
Posted on March 20th, 2008 at 11:31 pm
[…] Overview bem completo com aplicação DEMO […]
Posted on March 21st, 2008 at 11:33 am
[…] see for yourself by reading Adobe’s blurb. You might also want to install AIR and download a sample application. (AIR applications have an .air extension. After you have installed AIR, simply double-click on an […]
Posted on March 25th, 2008 at 2:36 pm
[…] major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between […]
Posted on March 25th, 2008 at 2:54 pm
[…] coincide with the release of Adobe’s AIR v1.0, the Ext team released v2.0.2 of the Ext framework with enhanced support for the new AIR runtime. The Ext and Adobe teams collaborated during the AIR […]
Posted on April 13th, 2008 at 1:18 am
[…] 下载 Simple Tasks 下载源文件 (part of the Ext 2.0.2 distribution) 查看范例教程 […]
Posted on April 14th, 2008 at 10:51 pm
[…] first really awesome AIR app I saw was ExtJS creator Jack Slockum’s “Simple Tasks”. Check out the screen-shots and you’ll see why I was excited: here was a desktop application with […]
Posted on April 19th, 2008 at 1:31 pm
[…] http://extjs.com/blog/2008/02/24/tasks2/ […]
Posted on May 26th, 2008 at 4:01 am
[…] приложения SimpleTask (планировщика задач, просмотреть и загрузить который можно здесь), стало приложение для просмотра документации по API […]