/ext-4.1.0_b3/docs/extjs/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
  8Ext.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