examples/desktop/js/StartMenu.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 Ext.define('Ext.ux.desktop.StartMenu', {
   9     extend: 'Ext.panel.Panel',
  10
  11     requires: [
  12         'Ext.menu.Menu',
  13         'Ext.toolbar.Toolbar'
  14     ],
  15
  16     ariaRole: 'menu',
  17
  18     cls: 'x-menu ux-start-menu',
  19
  20     defaultAlign: 'bl-tl',
  21
  22     iconCls: 'user',
  23
  24     floating: true,
  25
  26     shadow: true,
  27
  28     // We have to hardcode a width because the internal Menu cannot drive our width.
  29     // This is combined with changing the align property of the menu's layout from the
  30     // typical 'stretchmax' to 'stretch' which allows the the items to fill the menu
  31     // area.
  32     width: 300,
  33
  34     initComponent: function() {
  35         var me = this, menu = me.menu;
  36
  37         me.menu = new Ext.menu.Menu({
  38             cls: 'ux-start-menu-body',
  39             border: false,
  40             floating: false,
  41             items: menu
  42         });
  43         me.menu.layout.align = 'stretch';
  44
  45         me.items = [me.menu];
  46         me.layout = 'fit';
  47
  48         Ext.menu.Manager.register(me);
  49         me.callParent();
  50         // TODO - relay menu events
  51
  52         me.toolbar = new Ext.toolbar.Toolbar(Ext.apply({
  53             dock: 'right',
  54             cls: 'ux-start-menu-toolbar',
  55             vertical: true,
  56             width: 100
  57         }, me.toolConfig));
  58
  59         me.toolbar.layout.align = 'stretch';
  60         me.addDocked(me.toolbar);
  61
  62         delete me.toolItems;
  63
  64         me.on('deactivate', function () {
  65             me.hide();
  66         });
  67     },
  68
  69     addMenuItem: function() {
  70         var cmp = this.menu;
  71         cmp.add.apply(cmp, arguments);
  72     },
  73
  74     addToolItem: function() {
  75         var cmp = this.toolbar;
  76         cmp.add.apply(cmp, arguments);
  77     },
  78
  79     showBy: function(cmp, pos, off) {
  80         var me = this;
  81
  82         if (me.floating && cmp) {
  83             me.layout.autoSize = true;
  84             me.show();
  85
  86             // Component or Element
  87             cmp = cmp.el || cmp;
  88
  89             // Convert absolute to floatParent-relative coordinates if necessary.
  90             var xy = me.el.getAlignToXY(cmp, pos || me.defaultAlign, off);
  91             if (me.floatParent) {
  92                 var r = me.floatParent.getTargetEl().getViewRegion();
  93                 xy[0] -= r.x;
  94                 xy[1] -= r.y;
  95             }
  96             me.showAt(xy);
  97             me.doConstrain();
  98         }
  99         return me;
 100     }
 101 }); // StartMenu