examples/desktop/js/TaskBar.js

   1 /*!
   2  * Ext JS Library 4.0
   3  * Copyright(c) 2006-2011 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7
   8 /**
   9  * @class Ext.ux.desktop.TaskBar
  10  * @extends Ext.toolbar.Toolbar
  11  */
  12 Ext.define('Ext.ux.desktop.TaskBar', {
  13     extend: 'Ext.toolbar.Toolbar', // TODO - make this a basic hbox panel...
  14
  15     requires: [
  16         'Ext.button.Button',
  17         'Ext.resizer.Splitter',
  18         'Ext.menu.Menu',
  19
  20         'Ext.ux.desktop.StartMenu'
  21     ],
  22
  23     alias: 'widget.taskbar',
  24
  25     cls: 'ux-taskbar',
  26
  27     /**
  28      * @cfg {String} startBtnText
  29      * The text for the Start Button.
  30      */
  31     startBtnText: 'Start',
  32
  33     initComponent: function () {
  34         var me = this;
  35
  36         me.startMenu = new Ext.ux.desktop.StartMenu(me.startConfig);
  37
  38         me.quickStart = new Ext.toolbar.Toolbar(me.getQuickStart());
  39
  40         me.windowBar = new Ext.toolbar.Toolbar(me.getWindowBarConfig());
  41
  42         me.tray = new Ext.toolbar.Toolbar(me.getTrayConfig());
  43
  44         me.items = [
  45             {
  46                 xtype: 'button',
  47                 cls: 'ux-start-button',
  48                 iconCls: 'ux-start-button-icon',
  49                 menu: me.startMenu,
  50                 menuAlign: 'bl-tl',
  51                 text: me.startBtnText
  52             },
  53             me.quickStart,
  54             {
  55                 xtype: 'splitter', html: '&#160;',
  56                 height: 14, width: 2, // TODO - there should be a CSS way here
  57                 cls: 'x-toolbar-separator x-toolbar-separator-horizontal'
  58             },
  59             //'-',
  60             me.windowBar,
  61             '-',
  62             me.tray
  63         ];
  64
  65         me.callParent();
  66     },
  67
  68     afterLayout: function () {
  69         var me = this;
  70         me.callParent();
  71         me.windowBar.el.on('contextmenu', me.onButtonContextMenu, me);
  72     },
  73
  74     /**
  75      * This method returns the configuration object for the Quick Start toolbar. A derived
  76      * class can override this method, call the base version to build the config and
  77      * then modify the returned object before returning it.
  78      */
  79     getQuickStart: function () {
  80         var me = this, ret = {
  81             minWidth: 20,
  82             width: 60,
  83             items: [],
  84             enableOverflow: true
  85         };
  86
  87         Ext.each(this.quickStart, function (item) {
  88             ret.items.push({
  89                 tooltip: { text: item.name, align: 'bl-tl' },
  90                 //tooltip: item.name,
  91                 overflowText: item.name,
  92                 iconCls: item.iconCls,
  93                 module: item.module,
  94                 handler: me.onQuickStartClick,
  95                 scope: me
  96             });
  97         });
  98
  99         return ret;
 100     },
 101
 102     /**
 103      * This method returns the configuration object for the Tray toolbar. A derived
 104      * class can override this method, call the base version to build the config and
 105      * then modify the returned object before returning it.
 106      */
 107     getTrayConfig: function () {
 108         var ret = {
 109             width: 80,
 110             items: this.trayItems
 111         };
 112         delete this.trayItems;
 113         return ret;
 114     },
 115
 116     getWindowBarConfig: function () {
 117         return {
 118             flex: 1,
 119             cls: 'ux-desktop-windowbar',
 120             items: [ '&#160;' ],
 121             layout: { overflowHandler: 'Scroller' }
 122         };
 123     },
 124
 125     getWindowBtnFromEl: function (el) {
 126         var c = this.windowBar.getChildByElement(el);
 127         return c || null;
 128     },
 129
 130     onQuickStartClick: function (btn) {
 131         var module = this.app.getModule(btn.module);
 132         if (module) {
 133             module.createWindow();
 134         }
 135     },
 136
 137     onButtonContextMenu: function (e) {
 138         var me = this, t = e.getTarget(), btn = me.getWindowBtnFromEl(t);
 139         if (btn) {
 140             e.stopEvent();
 141             me.windowMenu.theWin = btn.win;
 142             me.windowMenu.showBy(t);
 143         }
 144     },
 145
 146     onWindowBtnClick: function (btn) {
 147         var win = btn.win;
 148
 149         if (win.minimized || win.hidden) {
 150             win.show();
 151         } else if (win.active) {
 152             win.minimize();
 153         } else {
 154             win.toFront();
 155         }
 156     },
 157
 158     addTaskButton: function(win) {
 159         var config = {
 160             iconCls: win.iconCls,
 161             enableToggle: true,
 162             toggleGroup: 'all',
 163             width: 140,
 164             text: Ext.util.Format.ellipsis(win.title, 20),
 165             listeners: {
 166                 click: this.onWindowBtnClick,
 167                 scope: this
 168             },
 169             win: win
 170         };
 171
 172         var cmp = this.windowBar.add(config);
 173         cmp.toggle(true);
 174         return cmp;
 175     },
 176
 177     removeTaskButton: function (btn) {
 178         var found, me = this;
 179         me.windowBar.items.each(function (item) {
 180             if (item === btn) {
 181                 found = item;
 182             }
 183             return !found;
 184         });
 185         if (found) {
 186             me.windowBar.remove(found);
 187         }
 188         return found;
 189     },
 190
 191     setActiveButton: function(btn) {
 192         if (btn) {
 193             btn.toggle(true);
 194         } else {
 195             this.windowBar.items.each(function (item) {
 196                 if (item.isButton) {
 197                     item.toggle(false);
 198                 }
 199             });
 200         }
 201     }
 202 });
 203
 204 /**
 205  * @class Ext.ux.desktop.TrayClock
 206  * @extends Ext.toolbar.TextItem
 207  * This class displays a clock on the toolbar.
 208  */
 209 Ext.define('Ext.ux.desktop.TrayClock', {
 210     extend: 'Ext.toolbar.TextItem',
 211
 212     alias: 'widget.trayclock',
 213
 214     cls: 'ux-desktop-trayclock',
 215
 216     html: '&#160;',
 217
 218     timeFormat: 'g:i A',
 219
 220     tpl: '{time}',
 221
 222     initComponent: function () {
 223         var me = this;
 224
 225         me.callParent();
 226
 227         if (typeof(me.tpl) == 'string') {
 228             me.tpl = new Ext.XTemplate(me.tpl);
 229         }
 230     },
 231
 232     afterRender: function () {
 233         var me = this;
 234         Ext.Function.defer(me.updateTime, 100, me);
 235         me.callParent();
 236     },
 237
 238     onDestroy: function () {
 239         var me = this;
 240
 241         if (me.timer) {
 242             window.clearTimeout(me.timer);
 243             me.timer = null;
 244         }
 245
 246         me.callParent();
 247     },
 248
 249     updateTime: function () {
 250         var me = this, time = Ext.Date.format(new Date(), me.timeFormat),
 251             text = me.tpl.apply({ time: time });
 252         if (me.lastText != text) {
 253             me.setText(text);
 254             me.lastText = text;
 255         }
 256         me.timer = Ext.Function.defer(me.updateTime, 10000, me);
 257     }
 258 });