Developers/Concepts/Windows

From Tine 2.0 - Wiki

< Developers


Window handling in Tine 2.0

Motivation

As a general design constrain, in Tine 2.0 we normally don't use modal windows.

Using the operating system's native window system has the major advantage, that windows could be dragged outside the main window. This is important for users with big/multiple screens. Moreover, using the operating system's window manager makes the application better integrated into users desktop.

Using a new window for each dialogue requires some attention as we can't use ExtJS's windowMgr for windows handling/communication.

Creating a new window

var win = new Ext.ux.PopupWindow({
  name: 'EditTaskWindow',
  url: 'index.php?method=Tasks.EditTask',
  width: 700,
  height: 300
});


Extending Ext.ux.PopupWindow

To have only one central point, where the adjustments like widht, height or additional parameters are made, it's best practice to wrap Ext.ux.PopupWindow for each window

/**
 * Tasks Edit Popup
 */
Tine.Tasks.EditPopup = function (taskId, containerId, relatedId, relatedApp) {
    taskId      = taskId      ? taskId      : -1;
    containerId = containerId ? containerId : -1;
    relatedApp  = relatedApp  ? relatedApp  : "";
    relatedId   = relatedId   ? relatedId   : -1;
   
    var window = new Ext.ux.PopupWindowMgr.fly({
        url: 'index.php?method=Tasks.editTask&taskId=' + taskId + '&linkingApp='+ relatedApp + '&linkedId=' + relatedId + '&containerId=' + containerId,
        name: 'TasksEditWindow' + taskId,
        width: 700,
        height: 300
    });
    return window;
}

In this example the window is created by Ext.ux.PopupWindowMgr.fly'. This methods checks if the window already exists and only opens it if not.

var win = new Tine.Tasks.EditPopup({
  id='9d1318078f88a46f49fa5adf446df208078f8da7'
});


Fetching window object

All windows opened by Ext.ux.PopupWindow are registered in the Ext.ux.PopupWindowMgr with their given name. The window object of the opened window is referenced in the registered popup property.

var win = Ext.ux.PopupWindowMgr.get('TasksEditWindow');
win.popup.Ext.MessageBox.wait(translation._('Please wait'), translation._('Demostrating PopupWindowManager'));


Window communication via events

The popupWindow itself defines the two events update and close.

var win = Ext.ux.PopupWindowMgr.get('TasksEditWindow');
win.on('update', function(task) {
  this.store.load({params: this.paging});
}, this);

This events are always proxied by the parent window's PopupManger.

opener.Ext.ux.PopupWindowMgr.get(window).fireEvent('update', task);
opener.Ext.ux.PopupWindowMgr.get(window).fireEvent('close', task);
opener.Ext.ux.PopupWindowMgr.get(window).purgeListeners();
window.setTimeout("window.close()", 1000);

Of course custom events could be defined when extending Ext.ux.PopupWindow