examples/desktop/js/Desktop.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.Desktop = function(app){
   8     this.taskbar = new Ext.ux.TaskBar(app);
   9     this.xTickSize = this.yTickSize = 1;
  10     var taskbar = this.taskbar;
  11
  12     var desktopEl = Ext.get('x-desktop');
  13     var taskbarEl = Ext.get('ux-taskbar');
  14     var shortcuts = Ext.get('x-shortcuts');
  15
  16     var windows = new Ext.WindowGroup();
  17     var activeWindow;
  18
  19     function minimizeWin(win){
  20         win.minimized = true;
  21         win.hide();
  22     }
  23
  24     function markActive(win){
  25         if(activeWindow && activeWindow != win){
  26             markInactive(activeWindow);
  27         }
  28         taskbar.setActiveButton(win.taskButton);
  29         activeWindow = win;
  30         Ext.fly(win.taskButton.el).addClass('active-win');
  31         win.minimized = false;
  32     }
  33
  34     function markInactive(win){
  35         if(win == activeWindow){
  36             activeWindow = null;
  37             Ext.fly(win.taskButton.el).removeClass('active-win');
  38         }
  39     }
  40
  41     function removeWin(win){
  42         taskbar.removeTaskButton(win.taskButton);
  43         layout();
  44     }
  45
  46     function layout(){
  47         desktopEl.setHeight(Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight());
  48     }
  49     Ext.EventManager.onWindowResize(layout);
  50
  51     this.layout = layout;
  52
  53     this.createWindow = function(config, cls){
  54         var win = new (cls||Ext.Window)(
  55             Ext.applyIf(config||{}, {
  56                 renderTo: desktopEl,
  57                 manager: windows,
  58                 minimizable: true,
  59                 maximizable: true
  60             })
  61         );
  62         win.dd.xTickSize = this.xTickSize;
  63         win.dd.yTickSize = this.yTickSize;
  64         win.resizer.widthIncrement = this.xTickSize;
  65         win.resizer.heightIncrement = this.yTickSize;
  66         win.render(desktopEl);
  67         win.taskButton = taskbar.addTaskButton(win);
  68
  69         win.cmenu = new Ext.menu.Menu({
  70             items: [
  71
  72             ]
  73         });
  74
  75         win.animateTarget = win.taskButton.el;
  76
  77         win.on({
  78             'activate': {
  79                 fn: markActive
  80             },
  81             'beforeshow': {
  82                 fn: markActive
  83             },
  84             'deactivate': {
  85                 fn: markInactive
  86             },
  87             'minimize': {
  88                 fn: minimizeWin
  89             },
  90             'close': {
  91                 fn: removeWin
  92             }
  93         });
  94
  95         layout();
  96         return win;
  97     };
  98
  99     this.getManager = function(){
 100         return windows;
 101     };
 102
 103     this.getWindow = function(id){
 104         return windows.get(id);
 105     }
 106
 107     this.getWinWidth = function(){
 108         var width = Ext.lib.Dom.getViewWidth();
 109         return width < 200 ? 200 : width;
 110     }
 111
 112     this.getWinHeight = function(){
 113         var height = (Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight());
 114         return height < 100 ? 100 : height;
 115     }
 116
 117     this.getWinX = function(width){
 118         return (Ext.lib.Dom.getViewWidth() - width) / 2
 119     }
 120
 121     this.getWinY = function(height){
 122         return (Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight() - height) / 2;
 123     }
 124
 125     this.setTickSize = function(xTickSize, yTickSize) {
 126         this.xTickSize = xTickSize;
 127         if (arguments.length == 1) {
 128             this.yTickSize = xTickSize;
 129         } else {
 130             this.yTickSize = yTickSize;
 131         }
 132         windows.each(function(win) {
 133             win.dd.xTickSize = this.xTickSize;
 134             win.dd.yTickSize = this.yTickSize;
 135             win.resizer.widthIncrement = this.xTickSize;
 136             win.resizer.heightIncrement = this.yTickSize;
 137         }, this);
 138     };
 139
 140     this.cascade = function() {
 141         var x = 0, y = 0;
 142         windows.each(function(win) {
 143             if (win.isVisible() && !win.maximized) {
 144                 win.setPosition(x, y);
 145                 x += 20;
 146                 y += 20;
 147             }
 148         }, this);
 149     };
 150
 151     this.tile = function() {
 152         var availWidth = desktopEl.getWidth(true);
 153         var x = this.xTickSize;
 154         var y = this.yTickSize;
 155         var nextY = y;
 156         windows.each(function(win) {
 157             if (win.isVisible() && !win.maximized) {
 158                 var w = win.el.getWidth();
 159
 160 //              Wrap to next row if we are not at the line start and this Window will go off the end
 161                 if ((x > this.xTickSize) && (x + w > availWidth)) {
 162                     x = this.xTickSize;
 163                     y = nextY;
 164                 }
 165
 166                 win.setPosition(x, y);
 167                 x += w + this.xTickSize;
 168                 nextY = Math.max(nextY, y + win.el.getHeight() + this.yTickSize);
 169             }
 170         }, this);
 171     };
 172
 173     this.contextMenu = new Ext.menu.Menu({
 174         items: [{
 175             text: 'Tile',
 176             handler: this.tile,
 177             scope: this
 178         }, {
 179             text: 'Cascade',
 180             handler: this.cascade,
 181             scope: this
 182         }]
 183     });
 184     desktopEl.on('contextmenu', function(e) {
 185         e.stopEvent();
 186         this.contextMenu.showAt(e.getXY());
 187     }, this);
 188
 189     layout();
 190
 191     if(shortcuts){
 192         shortcuts.on('click', function(e, t){
 193             if(t = e.getTarget('dt', shortcuts)){
 194                 e.stopEvent();
 195                 var module = app.getModule(t.id.replace('-shortcut', ''));
 196                 if(module){
 197                     module.createWindow();
 198                 }
 199             }
 200         });
 201     }
 202 };