263 lines
No EOL
7.3 KiB
JavaScript
263 lines
No EOL
7.3 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 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.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
/**
|
|
* @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;
|
|
}
|
|
}); |