examples/desktop/js/Desktop.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.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         {
  57             renderTo: desktopEl,
  58             manager: windows,
  59             minimizable: true,
  60             maximizable: true
  61         })
  62         );
  63         win.dd.xTickSize = this.xTickSize;
  64         win.dd.yTickSize = this.yTickSize;
  65         if (win.resizer) {
  66             win.resizer.widthIncrement = this.xTickSize;
  67             win.resizer.heightIncrement = this.yTickSize;
  68         }
  69         win.render(desktopEl);
  70         win.taskButton = taskbar.addTaskButton(win);
  71
  72         win.cmenu = new Ext.menu.Menu({
  73             items: [
  74
  75             ]
  76         });
  77
  78         win.animateTarget = win.taskButton.el;
  79
  80         win.on({
  81             'activate': {
  82                 fn: markActive
  83             },
  84             'beforeshow': {
  85                 fn: markActive
  86             },
  87             'deactivate': {
  88                 fn: markInactive
  89             },
  90             'minimize': {
  91                 fn: minimizeWin
  92             },
  93             'close': {
  94                 fn: removeWin
  95             }
  96         });
  97
  98         layout();
  99         return win;
 100     };
 101
 102     this.getManager = function() {
 103         return windows;
 104     };
 105
 106     this.getWindow = function(id) {
 107         return windows.get(id);
 108     };
 109
 110     this.getWinWidth = function() {
 111         var width = Ext.lib.Dom.getViewWidth();
 112         return width < 200 ? 200: width;
 113     };
 114
 115     this.getWinHeight = function() {
 116         var height = (Ext.lib.Dom.getViewHeight() - taskbarEl.getHeight());
 117         return height < 100 ? 100: height;
 118     };
 119
 120     this.getWinX = function(width) {
 121         return (Ext.lib.Dom.getViewWidth() - width) / 2;
 122     };
 123
 124     this.getWinY = function(height) {
 125         return (Ext.lib.Dom.getViewHeight() - taskbarEl.getHeight() - height) / 2;
 126     };
 127
 128     this.setTickSize = function(xTickSize, yTickSize) {
 129         this.xTickSize = xTickSize;
 130         if (arguments.length == 1) {
 131             this.yTickSize = xTickSize;
 132         } else {
 133             this.yTickSize = yTickSize;
 134         }
 135         windows.each(function(win) {
 136             win.dd.xTickSize = this.xTickSize;
 137             win.dd.yTickSize = this.yTickSize;
 138             win.resizer.widthIncrement = this.xTickSize;
 139             win.resizer.heightIncrement = this.yTickSize;
 140         },
 141         this);
 142     };
 143
 144     this.cascade = function() {
 145         var x = 0,
 146         y = 0;
 147         windows.each(function(win) {
 148             if (win.isVisible() && !win.maximized) {
 149                 win.setPosition(x, y);
 150                 x += 20;
 151                 y += 20;
 152             }
 153         },
 154         this);
 155     };
 156
 157     this.tile = function() {
 158         var availWidth = desktopEl.getWidth(true);
 159         var x = this.xTickSize;
 160         var y = this.yTickSize;
 161         var nextY = y;
 162         windows.each(function(win) {
 163             if (win.isVisible() && !win.maximized) {
 164                 var w = win.el.getWidth();
 165
 166                 //              Wrap to next row if we are not at the line start and this Window will go off the end
 167                 if ((x > this.xTickSize) && (x + w > availWidth)) {
 168                     x = this.xTickSize;
 169                     y = nextY;
 170                 }
 171
 172                 win.setPosition(x, y);
 173                 x += w + this.xTickSize;
 174                 nextY = Math.max(nextY, y + win.el.getHeight() + this.yTickSize);
 175             }
 176         },
 177         this);
 178     };
 179
 180     this.contextMenu = new Ext.menu.Menu({
 181         items: [{
 182             text: 'Tile',
 183             handler: this.tile,
 184             scope: this
 185         },
 186         {
 187             text: 'Cascade',
 188             handler: this.cascade,
 189             scope: this
 190         }]
 191     });
 192     desktopEl.on('contextmenu',
 193         function(e) {
 194             e.stopEvent();
 195             this.contextMenu.showAt(e.getXY());
 196         },
 197         this);
 198
 199     layout();
 200
 201     if (shortcuts) {
 202         shortcuts.on('click',
 203         function(e, t) {
 204             t = e.getTarget('dt', shortcuts);
 205             if (t) {
 206                 e.stopEvent();
 207                 var module = app.getModule(t.id.replace('-shortcut', ''));
 208                 if (module) {
 209                     module.createWindow();
 210                 }
 211             }
 212         });
 213     }
 214 };