+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+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.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.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 JS Library 4.0
+ * Copyright(c) 2006-2011 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
*/
-Ext.namespace("Ext.ux");
+Ext.define('Ext.ux.desktop.StartMenu', {
+ extend: 'Ext.panel.Panel',
-Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {
- initComponent: function(config) {
- Ext.ux.StartMenu.superclass.initComponent.call(this, config);
+ requires: [
+ 'Ext.menu.Menu',
+ 'Ext.toolbar.Toolbar'
+ ],
- var tools = this.toolItems;
- this.toolItems = new Ext.util.MixedCollection();
- if(tools){
- this.addTool.apply(this, tools);
- }
- },
+ ariaRole: 'menu',
- // private
- onRender : function(ct, position){
- Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);
- var el = this.el.addClass('ux-start-menu');
+ cls: 'x-menu ux-start-menu',
- var header = el.createChild({
- tag: "div",
- cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls
- });
+ defaultAlign: 'bl-tl',
- 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"
- });
+ iconCls: 'user',
- this.mon(toolsUl, 'click', this.onClick, this);
- this.mon(toolsUl, 'mouseover', this.onMouseOver, this);
- this.mon(toolsUl, 'mouseout', this.onMouseOut, this);
+ floating: true,
- this.items.each(function(item){
- item.parentMenu = this;
- }, this);
+ shadow: 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);
+ // 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.toolsUl = toolsUl;
+ initComponent: function() {
+ var me = this, menu = me.menu;
- this.menuBWrap.setStyle('position', 'relative');
- this.menuBWrap.setHeight(this.height - 28);
-
- 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
+
git.ithinksw.org / extjs.git / blobdiff