Sencha Inc. | HTML5 Apps

Blog

Simple Tasks v2 - Multiple lists, NativeWindows and Reminders

February 25, 2008 | 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
});
 
Task NativeWindow in Simple Tasks 2
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.
Dragging Outlook tasks 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();
        }
    }]
});
 
Simple Tasks in the System Tray
Sound AIR also supports playing sounds. Ext.air.Sound makes that even easier.
 
Ext.air.Sound.play('beep.mp3');
 
The irritating beeping sound is sure to catch your attention

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.
TreeList supports selection of data organized hierarchically
Custom Grid Columns The easiest way to explain is with screenshots.
Pseudo button column, used to toggle complete/active
Menu column, used to set quick reminders
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.
Quick view change
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.

There are 76 responses. Add yours.

jarrednicholls

7 years ago

Jack, this is very nice.  Thanks for the post.  I’ll be sure to check out the new samples.

wm003

7 years ago

Wonderful addition! smile 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 smile

Rob Christensen

7 years ago

Jack,

Truly an amazing application! You continue to push the boundaries of what’s possible. I’m blown away.

Rob Christensen
Adobe AIR Team

Ajaxian » Adobe AIR v1.0 & Flex 3.0 Rele

7 years ago

[...] 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 [...]

Lucian

7 years ago

Can it get any better?...

Nice, all I have to do now in order to complete my app is to rewrite the whole code…

serkanyersen

7 years ago

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:

serkanyersen

7 years ago

Ok! HTML doesn’t work.
Here is the url of screenshot:
http://www.jotform.com/uploads/serkan/71334141967/69735204882488227/Picture 2.png

John

7 years ago

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

NooDev ‘n’ Tek » Blog Archive &r

7 years ago

[...] 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 [...]

Ajax Girl » Blog Archive » Adobe AIR v

7 years ago

[...] 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 [...]

Raul

7 years ago

That looks really fantastic.
Thanks Jack

DAddYE

7 years ago

Didn’t work also for me:

[app:/main.html][12:14:53] SQLError: ‘Error #3122’, details:‘null’, operation:‘execute’

Why?

Ext and Adobe AIR | foojam.com

7 years ago

[...] 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 [...]

Javascript News » Blog Archive » Adobe

7 years ago

[...] 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 [...]

Javascript News » Blog Archive » Ext R

7 years ago

[...] 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 [...]

NooDev ‘n’ Tek » Blog Archive &r

7 years ago

[...] 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 [...]

Adobe AIR 1.0 and Flex 3 Launched Today « [

7 years ago

[...] 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 [...]

Flex 3.0 e AIR 1.0 agora tem versão oficial. | Mar

7 years ago

[...] 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 [...]

rswafford

7 years ago

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…

Gary Gilbert

7 years ago

Wow Jack,

You and the EXT team continue to push the envelope!

Gary

Jack Slocum

7 years ago

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.

Rob

7 years ago

Will you guys build a Aptana plugin?

Revue de Presse Xebia par J2EE, Agilité et SOA&nbs

7 years ago

[...] [removed] 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 [...]

Ajax Girl » Blog Archive » Ext Release

7 years ago

[...] 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 [...]

Extjs 2.0.2 :: TermiT's Blog

7 years ago

[...] ????????? ???????????? javascript ????????? extjs. ???? ?? ??????? ?????????? ????? ?????? ?????????? ? AIR runtime. ? ?????? Ext.air ???????? ????????? ??????????: [...]

vike

7 years ago

thanks for your work!
this’s awesome yet pretty!

cupofjava

7 years ago

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?).

Uza’s Blog & More » Blog Archive &

7 years ago

[...] 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 [...]

Rich Waters » Blog Archive » Ext 2.0.2

7 years ago

[...] 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. [...]

llin96

7 years ago

just took a look at the Proxy class, seems it does not support multiple tabes inner join select

Neue ExtJS Version 2.0.2 Released | Air | Fritz Th

7 years ago

[...] Ext Blog findet man eine aktualisierte Version von Simple Tasks - ein Demo von ExtJS, dass die Adobe AIR Unterstützung von ExtJS [...]

DigitalSkyline

7 years ago

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.

Vinny Carpenter’s blog - » Daily del.i

7 years ago

[...] 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 [...]

theba.hu » Blog Archive » ExtJS 2.0.2 - Adob

7 years ago

[...] 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. [...]

serkanyersen

7 years ago

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.

DAddYE

7 years ago

Still don’t work on leopard

[app:/main.html][12:14:53] SQLError: ‘Error #3122?, details:’null’, operation:’execute’

» Ext Js 2.0.2 - theportraitofageek.com

7 years ago

[...] ?????? ?????????? ?????? ???? ?????? 2.0.2 ??? ????? ??????????? AIR [...]

More Adobe AIR News | foojam.com

7 years ago

[...] 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 [...]

Marc

7 years ago

Works on Leopard for me with the latest download of Air.

Michael

7 years ago

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

selfeky

7 years ago

Jack, this is amazing.

I think its missing a sync mechanism
or ability to use a remote database.

great work.

Jack Slocum

7 years ago

Michael, can you give any more info? I am unable to duplicate the issue (I tried every sample for the homepage). Thanks!

Ext JS 2.0.2 liberado | Lobo tuerto

7 years ago

[...] el ejemplo Ext 2.0.2 + Simple Tasks v2 for AIR 1.0, se ve bastante [...]

Max

7 years ago

This framework is growing faster then I can get use of it. Great Work!

17th Degree » Blog Archive » Ext JS 2.

7 years ago

[...] 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 [...]

Web 2.0 Announcer

7 years ago

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 ...

????????? ????? » ????? ????? » Simple

7 years ago

[...] ???????????? ? ???????????? ??????? ? ????? ?? ExtJS.com [...]

20080229 ?? - ???????? - ???? Jacky’s Blog

7 years ago

[...] Simple Tasks v2 – Multiple lists, NativeWindows and Reminders Ext 2.0.2 ?? AIR ????????????? [...]

Kevin Hakman

7 years ago

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

linizou

7 years ago

I like it .

James Carr » Blog Archive » links for

7 years ago

[...] Simple Tasks v2 - Multiple lists, NativeWindows and Reminders (tags: air javascript extjs interesting) [...]

E

7 years ago

Great!

Is it possible to make tasks hierarchy?
Or Grid component doesn’t let it?
Thanks!

» ExtJS 2.0.2 release com suporte ao AIR 1.0

7 years ago

[...] Overview bem completo com aplicação DEMO [...]

Rizal Almashoor’s Blog » Blog Archive

7 years ago

[...] 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 [...]

Blog of Glenn Marcus » Blog Archive »

6 years ago

[...] 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 [...]

Blog of Glenn Marcus » Blog Archive »

6 years ago

[...] 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 [...]

Matrix » Adobe AIR????????

6 years ago

[...] ?? Simple Tasks ????? (part of the Ext 2.0.2 distribution) ?????? [...]

patspam.com » Blog Archive » Tarpo

6 years ago

[...] 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 [...]

Fernando Costa » Blog Archive » Adobe

6 years ago

ExtJS – ????????? ????????? ????????? ? ???????? -

6 years ago

[...] ?????????? SimpleTask (???????????? ?????, ??????????? ? ????????? ??????? ????? ?????), ????? ?????????? ??? ????????? ???????????? ?? API [...]

Interfaces de Usuário com JavaScript » Julio

6 years ago

[...] os desenvolvedores AIR não precisam ficar tristes: há até um demo do bichinho em funcionamento. Ainda não tive muito tempo com o AIR, mas acredito que a questão da [...]

Andrew Shorten » 10 AIR apps you can’t

6 years ago

[...] Simple Tasks, a simple task/to-do list manager. Developer: Jack Slocum [...]

Interfaces de Usuário com JavaScript » Julio

6 years ago

[...] os desenvolvedores AIR não precisam ficar tristes: há até um demo do bichinho em funcionamento. Ainda não tive muito tempo com o AIR, mas acredito que a questão da [...]

nateirwin.net » Blog Archive » Adobe A

6 years ago

[...] Slocum, author of my favorite JavaScript library, Ext, recently converted the Simple Tasks sample application to run on AIR [...]

I’m good at writing lists; not so good at cr

6 years ago

[...] The first one, MiniTask is as the name suggest a minimalist approach to task lists. The second one, Simple Tasks V2 is much more complex and has a few of the features that I think would be useful in MiniTask. [...]

2 ?? 1: ??? ????? ???????! « Tech Talk Time

6 years ago

[...] Simple Tasks v2 ??????? ?? AIR ????? ??????. [...]

Rich Internet application - CodeCall Programming F

6 years ago

[...] without the need for reloading. Here are some examples using Ext JS:  Ext 2.0 Desktop Sample App Ext JS - Blog   __________________ CodeCall Blog | CodeCall Wiki | Shareware Site | Linux Forum | Write a Blog [...]

Flash The Ripper » Archives » Adobe Fl

6 years ago

[...] inside, especially when you know how much power is in the JavaScript frameworks like ExtJS, which embraces the AIR [...]

ExtJS ve ExtGWT JavaScript Kütüphaneleri | Bedavam

6 years ago

[...] Tasks (Kod ve Aç?klama)  ExtJS Simple [...]

2 ?? 1: ??? ????? ???????! « ????? ??? ????

6 years ago

[...] Simple Tasks v2 ??????? ?? AIR ????? ??????. [...]

eltomtom.com » Blog Archive » Sexy loo

5 years ago

[...] 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 [...]

blog.cdbk.net » ?????????????????????Simple

5 years ago

[...] ???????????????? [...]

aboyon blog » ExtJS vs Mochaui

5 years ago

[...] y encima sigue sumando puntos (desde la version anterior, la 2, tiene integracion con Gears, y Air), pero Mochaui es una muy buena alternativa para quien puede arrancar un proyecto sin demasiada [...]

2 ?? 1: ??? ????? ???????! : : ??????? (??????)

5 years ago

[...] Simple Tasks v2 ??????? ?? AIR ????? ??????. [...]

2 ?? 1: ??? ????? ???????! » Orient.ps

5 years ago

[...] Simple Tasks v2 ??????? ?? AIR ????? ??????. [...]

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.