examples/desktop/js/TaskBar.js

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