03
Nov
08

ExtJs Window Handling with Ext.ux.PopupWindow

post info

By Cornelius Weiss
Categories: Javascript, eGroupWare, extJS and tine 2.0
3 Comments

In ExtJs application windows are created using the Ext.Window. These windows are some kind of a layer above the mainscreen having an nice looking chrome. The Ext.WindowManager keeps track about all windows and brings method to manage the windows. However, as these windows are no real browser windows (aka popups), they have some limitations.

  • Ext.Window’s have a different style than the native operating system windows. This may confuse users, especially those, not familiar with the technical background in web apps.
  • Ext.Window’s can’t be dragged out of the browsers viewport. Users with large or multiple screens will feel limited with those windows.
  • Users don’t want to have an extra window manager inside the normal operating systems window manager. Just look back to the ugly star-office approach, which we all hated.
As a consequence we decided to use native windows in Tine 2.0. However, dealing with native windows in a Javacript application turned out to be a non trivial thing. A new browser window brings a new javascipt context and we needed to find a way to bring our content into the new context. Also we needed to find a way how windows can communicate. The opener.location = opener.location from the good old Web 1.0 times obviously is not adequate any more ;-) . Thinking about offline functionality brought even more complexity to the system. When the Browser is offline, you need to create windows without any help of a server.
Solving this problem was one of the major goals in our current javascript re-factoring period. Finlay we came up with three user extensions to the ExtJS library.
  1. Ext.ux.PopupWindow which goes almost parallel to the Ext.Window
  2. Ext.ux.PopupWindowGroup which goes almost parallel to the Ext.WindowGroup
  3. Ext.ux.WindowFactory which is capable to factor Ext.Windows, Ext.ux.PopupWindows and Ext.air.NativeWindows
You can find the code in the Tine 2.0 svn repository. At the moment we have the following hard coded in our javascript bootstrap:
Tine.WindowFactory = new Ext.ux.WindowFactory({
    windowType: 'Browser'
});
If you change this to:
Tine.WindowFactory = new Ext.ux.WindowFactory({
windowType: 'Ext'
});

you’ll have a version of Tine with Ext.Windows.

     

The Air part is not tested yet, as I struggle with the hard coded ‘eval’ functions in the extjs code which break the security model of Adobe Air.

I’m not shure if we make use of Ext.Window in Tine. It may be a helpful config option for users with old browsers like IE6 which has an very slow javascript engine. When our re-factoring period has finished, we will even be able to create the windows offline.

3 Responses to “ExtJs Window Handling with Ext.ux.PopupWindow”

Feed for this Entry Trackback Address View blog reactions
  1. 1 A Mcdaniel Jan 21st, 2009 at 5:02 pm

    This would be something to see. Did not think it was possible.

  2. 2 Juuh Jan 29th, 2009 at 11:13 am

    How do we lock a window ?, stop it from being movable ?

  3. 3 Cornelius Weiss Feb 1st, 2009 at 5:25 pm

    I don’t understande the question.

    do you mean how to force a window staying in foreground? Just watch the blur event and focus it again.

Leave a Reply

« Dealing with Time-Zones in Javascript
Pictures from the release-party »