X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/desktop/js/StartMenu.js diff --git a/examples/desktop/js/StartMenu.js b/examples/desktop/js/StartMenu.js old mode 100644 new mode 100755 index 63e249cd..b6721c25 --- a/examples/desktop/js/StartMenu.js +++ b/examples/desktop/js/StartMenu.js @@ -1,249 +1,101 @@ /*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. + * Ext JS Library 4.0 + * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ -/** - * @class Ext.ux.StartMenu - * @extends Ext.menu.Menu - * A start menu object. - * @constructor - * Creates a new StartMenu - * @param {Object} config Configuration options - * - * SAMPLE USAGE: - * - * this.startMenu = new Ext.ux.StartMenu({ - * iconCls: 'user', - * height: 300, - * shadow: true, - * title: get_cookie('memberName'), - * width: 300 - * }); - * - * this.startMenu.add({ - * text: 'Grid Window', - * iconCls:'icon-grid', - * handler : this.createWindow, - * scope: this - * }); - * - * this.startMenu.addTool({ - * text:'Logout', - * iconCls:'logout', - * handler:function(){ window.location = "logout.php"; }, - * scope:this - * }); - */ - -Ext.namespace("Ext.ux"); -Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, { - initComponent: function(config) { - Ext.ux.StartMenu.superclass.initComponent.call(this, config); +Ext.define('Ext.ux.desktop.StartMenu', { + extend: 'Ext.panel.Panel', - var tools = this.toolItems; - this.toolItems = new Ext.util.MixedCollection(); - if(tools){ - this.addTool.apply(this, tools); - } - }, + requires: [ + 'Ext.menu.Menu', + 'Ext.toolbar.Toolbar' + ], - // private - onRender : function(ct, position){ - Ext.ux.StartMenu.superclass.onRender.call(this, ct, position); - var el = this.el.addClass('ux-start-menu'); + ariaRole: 'menu', - var header = el.createChild({ - tag: "div", - cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls - }); + cls: 'x-menu ux-start-menu', - this.header = header; - - var headerText = header.createChild({ - tag: "span", - cls: "x-window-header-text" - }); - var tl = header.wrap({ - cls: "ux-start-menu-tl" - }); - var tr = header.wrap({ - cls: "ux-start-menu-tr" - }); - var tc = header.wrap({ - cls: "ux-start-menu-tc" - }); - - this.menuBWrap = el.createChild({ - tag: "div", - cls: "x-window-body x-border-layout-ct ux-start-menu-body" - }); - var ml = this.menuBWrap.wrap({ - cls: "ux-start-menu-ml" - }); - var mc = this.menuBWrap.wrap({ - cls: "x-window-mc ux-start-menu-bwrap" - }); - - this.menuPanel = this.menuBWrap.createChild({ - tag: "div", - cls: "x-panel x-border-panel ux-start-menu-apps-panel" - }); - this.toolsPanel = this.menuBWrap.createChild({ - tag: "div", - cls: "x-panel x-border-panel ux-start-menu-tools-panel" - }); - - var bwrap = ml.wrap({cls: "x-window-bwrap"}); - var bc = bwrap.createChild({ - tag: "div", - cls: "ux-start-menu-bc" - }); - var bl = bc.wrap({ - cls: "ux-start-menu-bl x-panel-nofooter" - }); - var br = bc.wrap({ - cls: "ux-start-menu-br" - }); - - this.ul.appendTo(this.menuPanel); - - var toolsUl = this.toolsPanel.createChild({ - tag: "ul", - cls: "x-menu-list" - }); + defaultAlign: 'bl-tl', - this.mon(toolsUl, 'click', this.onClick, this); - this.mon(toolsUl, 'mouseover', this.onMouseOver, this); - this.mon(toolsUl, 'mouseout', this.onMouseOut, this); + iconCls: 'user', - this.items.each(function(item){ - item.parentMenu = this; - }, this); + floating: true, - this.toolItems.each( - function(item){ - var li = document.createElement("li"); - li.className = "x-menu-list-item"; - toolsUl.dom.appendChild(li); - item.render(li); - item.parentMenu = this; - }, this); + shadow: true, - this.toolsUl = toolsUl; + // We have to hardcode a width because the internal Menu cannot drive our width. + // This is combined with changing the align property of the menu's layout from the + // typical 'stretchmax' to 'stretch' which allows the the items to fill the menu + // area. + width: 300, - this.menuBWrap.setStyle('position', 'relative'); - this.menuBWrap.setHeight(this.height - 28); + initComponent: function() { + var me = this, menu = me.menu; - this.menuPanel.setStyle({ - padding: '2px', - position: 'absolute', - overflow: 'auto' + me.menu = new Ext.menu.Menu({ + cls: 'ux-start-menu-body', + border: false, + floating: false, + items: menu }); + me.menu.layout.align = 'stretch'; - this.toolsPanel.setStyle({ - padding: '2px 4px 2px 2px', - position: 'absolute', - overflow: 'auto' - }); + me.items = [me.menu]; + me.layout = 'fit'; - this.setTitle(this.title); - }, + Ext.menu.Manager.register(me); + me.callParent(); + // TODO - relay menu events - // private - findTargetItem : function(e){ - var t = e.getTarget(".x-menu-list-item", this.ul, true); - if(t && t.menuItemId){ - if(this.items.get(t.menuItemId)){ - return this.items.get(t.menuItemId); - }else{ - return this.toolItems.get(t.menuItemId); - } - } - }, + me.toolbar = new Ext.toolbar.Toolbar(Ext.apply({ + dock: 'right', + cls: 'ux-start-menu-toolbar', + vertical: true, + width: 100 + }, me.toolConfig)); - /** - * Displays this menu relative to another element - * @param {Mixed} element The element to align to - * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to - * the element (defaults to this.defaultAlign) - * @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined) - */ - show : function(el, pos, parentMenu){ - this.parentMenu = parentMenu; - if(!this.el){ - this.render(); - } + me.toolbar.layout.align = 'stretch'; + me.addDocked(me.toolbar); - this.fireEvent("beforeshow", this); - this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); - var tPanelWidth = 100; - var box = this.menuBWrap.getBox(); - this.menuPanel.setWidth(box.width-tPanelWidth); - this.menuPanel.setHeight(box.height); + delete me.toolItems; - this.toolsPanel.setWidth(tPanelWidth); - this.toolsPanel.setX(box.x+box.width-tPanelWidth); - this.toolsPanel.setHeight(box.height); + me.on('deactivate', function () { + me.hide(); + }); }, - addTool : function(){ - var a = arguments, l = a.length, item; - for(var i = 0; i < l; i++){ - var el = a[i]; - if(el.render){ // some kind of Item - item = this.addToolItem(el); - }else if(typeof el == "string"){ // string - if(el == "separator" || el == "-"){ - item = this.addToolSeparator(); - }else{ - item = this.addText(el); - } - }else if(el.tagName || el.el){ // element - item = this.addElement(el); - }else if(typeof el == "object"){ // must be menu item config? - item = this.addToolMenuItem(el); - } - } - return item; + addMenuItem: function() { + var cmp = this.menu; + cmp.add.apply(cmp, arguments); }, - /** - * Adds a separator bar to the Tools - * @return {Ext.menu.Item} The menu item that was added - */ - addToolSeparator : function(){ - return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'})); + addToolItem: function() { + var cmp = this.toolbar; + cmp.add.apply(cmp, arguments); }, - addToolItem : function(item){ - this.toolItems.add(item); - if(this.ul){ - var li = document.createElement("li"); - li.className = "x-menu-list-item"; - this.ul.dom.appendChild(li); - item.render(li, this); - this.delayAutoWidth(); - } - return item; - }, + showBy: function(cmp, pos, off) { + var me = this; + + if (me.floating && cmp) { + me.layout.autoSize = true; + me.show(); + + // Component or Element + cmp = cmp.el || cmp; - addToolMenuItem : function(config){ - if(!(config instanceof Ext.menu.Item)){ - if(typeof config.checked == "boolean"){ // must be check menu item config? - config = new Ext.menu.CheckItem(config); - }else{ - config = new Ext.menu.Item(config); + // Convert absolute to floatParent-relative coordinates if necessary. + var xy = me.el.getAlignToXY(cmp, pos || me.defaultAlign, off); + if (me.floatParent) { + var r = me.floatParent.getTargetEl().getViewRegion(); + xy[0] -= r.x; + xy[1] -= r.y; } + me.showAt(xy); + me.doConstrain(); } - return this.addToolItem(config); - }, - - setTitle : function(title, iconCls){ - this.title = title; - this.header.child('span').update(title); - return this; + return me; } -}); \ No newline at end of file +}); // StartMenu