X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/sandbox/js/StartMenu.js diff --git a/examples/sandbox/js/StartMenu.js b/examples/sandbox/js/StartMenu.js new file mode 100644 index 00000000..63e249cd --- /dev/null +++ b/examples/sandbox/js/StartMenu.js @@ -0,0 +1,249 @@ +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 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); + + var tools = this.toolItems; + this.toolItems = new Ext.util.MixedCollection(); + if(tools){ + this.addTool.apply(this, tools); + } + }, + + // private + onRender : function(ct, position){ + Ext.ux.StartMenu.superclass.onRender.call(this, ct, position); + var el = this.el.addClass('ux-start-menu'); + + var header = el.createChild({ + tag: "div", + cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls + }); + + 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" + }); + + this.mon(toolsUl, 'click', this.onClick, this); + this.mon(toolsUl, 'mouseover', this.onMouseOver, this); + this.mon(toolsUl, 'mouseout', this.onMouseOut, this); + + this.items.each(function(item){ + item.parentMenu = this; + }, this); + + 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); + + this.toolsUl = toolsUl; + + this.menuBWrap.setStyle('position', 'relative'); + this.menuBWrap.setHeight(this.height - 28); + + this.menuPanel.setStyle({ + padding: '2px', + position: 'absolute', + overflow: 'auto' + }); + + this.toolsPanel.setStyle({ + padding: '2px 4px 2px 2px', + position: 'absolute', + overflow: 'auto' + }); + + this.setTitle(this.title); + }, + + // 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); + } + } + }, + + /** + * 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(); + } + + 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); + + this.toolsPanel.setWidth(tPanelWidth); + this.toolsPanel.setX(box.x+box.width-tPanelWidth); + this.toolsPanel.setHeight(box.height); + }, + + 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; + }, + + /** + * 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(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; + }, + + 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); + } + } + return this.addToolItem(config); + }, + + setTitle : function(title, iconCls){ + this.title = title; + this.header.child('span').update(title); + return this; + } +}); \ No newline at end of file