/*!
- * 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
git.ithinksw.org / extjs.git / blobdiff