/**
- * @class Ext.menu.Menu
- * @extends Ext.panel.Panel
- *
- * A menu object. This is the container to which you may add {@link Ext.menu.Item menu items}.
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * A menu object. This is the container to which you may add {@link Ext.menu.Item menu items}.
*
* Menus may contain either {@link Ext.menu.Item menu items}, or general {@link Ext.Component Components}.
* Menus may also contain {@link Ext.panel.AbstractPanel#dockedItems docked items} because it extends {@link Ext.panel.Panel}.
*
* To make a contained general {@link Ext.Component Component} line up with other {@link Ext.menu.Item menu items},
- * specify `{@link Ext.menu.Item#iconCls iconCls}: 'no-icon'` _or_ `{@link Ext.menu.Item#indent indent}: true`.
- * This reserves a space for an icon, and indents the Component in line with the other menu items.
- * See {@link Ext.form.field.ComboBox}.{@link Ext.form.field.ComboBox#getListParent getListParent} for an example.
-
- * By default, Menus are absolutely positioned, floating Components. By configuring a Menu with `{@link #floating}:false`,
+ * specify `{@link Ext.menu.Item#plain plain}: true`. This reserves a space for an icon, and indents the Component
+ * in line with the other menu items.
+ *
+ * By default, Menus are absolutely positioned, floating Components. By configuring a Menu with `{@link #floating}: false`,
* a Menu may be used as a child of a {@link Ext.container.Container Container}.
- * {@img Ext.menu.Item/Ext.menu.Item.png Ext.menu.Item component}
-__Example Usage__
- Ext.create('Ext.menu.Menu', {
- width: 100,
- height: 100,
- margin: '0 0 10 0',
- floating: false, // usually you want this set to True (default)
- renderTo: Ext.getBody(), // usually rendered by it's containing component
- items: [{
- text: 'regular item 1'
- },{
- text: 'regular item 2'
- },{
- text: 'regular item 3'
- }]
- });
-
- Ext.create('Ext.menu.Menu', {
- width: 100,
- height: 100,
- plain: true,
- floating: false, // usually you want this set to True (default)
- renderTo: Ext.getBody(), // usually rendered by it's containing component
- items: [{
- text: 'plain item 1'
- },{
- text: 'plain item 2'
- },{
- text: 'plain item 3'
- }]
- });
- * @xtype menu
- * @markdown
- * @constructor
- * @param {Object} config The config object
+ *
+ * @example
+ * Ext.create('Ext.menu.Menu', {
+ * width: 100,
+ * height: 100,
+ * margin: '0 0 10 0',
+ * floating: false, // usually you want this set to True (default)
+ * renderTo: Ext.getBody(), // usually rendered by it's containing component
+ * items: [{
+ * text: 'regular item 1'
+ * },{
+ * text: 'regular item 2'
+ * },{
+ * text: 'regular item 3'
+ * }]
+ * });
+ *
+ * Ext.create('Ext.menu.Menu', {
+ * width: 100,
+ * height: 100,
+ * plain: true,
+ * floating: false, // usually you want this set to True (default)
+ * renderTo: Ext.getBody(), // usually rendered by it's containing component
+ * items: [{
+ * text: 'plain item 1'
+ * },{
+ * text: 'plain item 2'
+ * },{
+ * text: 'plain item 3'
+ * }]
+ * });
*/
Ext.define('Ext.menu.Menu', {
extend: 'Ext.panel.Panel',
@@ -63,121 +72,121 @@ Ext.define('Ext.menu.Menu', {
'Ext.menu.Separator'
],
- /**
+ /**
+ * @property {Ext.menu.Menu} parentMenu
+ * The parent Menu of this Menu.
+ */
+
+ /**
* @cfg {Boolean} allowOtherMenus
- * True to allow multiple menus to be displayed at the same time. Defaults to `false`.
- * @markdown
+ * True to allow multiple menus to be displayed at the same time.
*/
allowOtherMenus: false,
- /**
+ /**
* @cfg {String} ariaRole @hide
*/
ariaRole: 'menu',
- /**
+ /**
* @cfg {Boolean} autoRender @hide
* floating is true, so autoRender always happens
*/
- /**
+ /**
* @cfg {String} defaultAlign
- * The default {@link Ext.core.Element#getAlignToXY Ext.core.Element#getAlignToXY} anchor position value for this menu
- * relative to its element of origin. Defaults to `'tl-bl?'`.
- * @markdown
+ * The default {@link Ext.Element#getAlignToXY Ext.Element#getAlignToXY} anchor position value for this menu
+ * relative to its element of origin.
*/
defaultAlign: 'tl-bl?',
- /**
+ /**
* @cfg {Boolean} floating
* A Menu configured as `floating: true` (the default) will be rendered as an absolutely positioned,
* {@link Ext.Component#floating floating} {@link Ext.Component Component}. If configured as `floating: false`, the Menu may be
* used as a child item of another {@link Ext.container.Container Container}.
- * @markdown
*/
floating: true,
- /**
+ /**
* @cfg {Boolean} @hide
- * Menu performs its own size changing constraining, so ensure Component's constraining is not applied
+ * Menus are constrained to the document body by default
*/
- constrain: false,
+ constrain: true,
- /**
- * @cfg {Boolean} hidden
+ /**
+ * @cfg {Boolean} [hidden=undefined]
* True to initially render the Menu as hidden, requiring to be shown manually.
+ *
* Defaults to `true` when `floating: true`, and defaults to `false` when `floating: false`.
- * @markdown
*/
hidden: true,
- /**
+ hideMode: 'visibility',
+
+ /**
* @cfg {Boolean} ignoreParentClicks
* True to ignore clicks on any item in this menu that is a parent item (displays a submenu)
- * so that the submenu is not dismissed when clicking the parent item. Defaults to `false`.
- * @markdown
+ * so that the submenu is not dismissed when clicking the parent item.
*/
ignoreParentClicks: false,
isMenu: true,
- /**
+ /**
* @cfg {String/Object} layout @hide
*/
- /**
- * @cfg {Boolean} showSeparator True to show the icon separator. (defaults to true).
+ /**
+ * @cfg {Boolean} showSeparator
+ * True to show the icon separator.
*/
showSeparator : true,
- /**
+ /**
* @cfg {Number} minWidth
- * The minimum width of the Menu. Defaults to `120`.
- * @markdown
+ * The minimum width of the Menu.
*/
minWidth: 120,
- /**
- * @cfg {Boolean} plain
- * True to remove the incised line down the left side of the menu and to not
- * indent general Component items. Defaults to `false`.
- * @markdown
+ /**
+ * @cfg {Boolean} [plain=false]
+ * True to remove the incised line down the left side of the menu and to not indent general Component items.
*/
initComponent: function() {
var me = this,
- prefix = Ext.baseCSSPrefix;
+ prefix = Ext.baseCSSPrefix,
+ cls = [prefix + 'menu'],
+ bodyCls = me.bodyCls ? [me.bodyCls] : [];
me.addEvents(
- /**
+ /**
* @event click
* Fires when this menu is clicked
* @param {Ext.menu.Menu} menu The menu which has been clicked
* @param {Ext.Component} item The menu item that was clicked. `undefined` if not applicable.
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}.
- * @markdown
*/
'click',
- /**
+ /**
* @event mouseenter
* Fires when the mouse enters this menu
* @param {Ext.menu.Menu} menu The menu
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}
- * @markdown
*/
'mouseenter',
- /**
+ /**
* @event mouseleave
* Fires when the mouse leaves this menu
* @param {Ext.menu.Menu} menu The menu
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}
- * @markdown
*/
'mouseleave',
- /**
+ /**
* @event mouseover
* Fires when the mouse is hovering over this menu
* @param {Ext.menu.Menu} menu The menu
@@ -190,14 +199,12 @@ Ext.define('Ext.menu.Menu', {
Ext.menu.Manager.register(me);
// Menu classes
- var cls = [prefix + 'menu'];
if (me.plain) {
cls.push(prefix + 'menu-plain');
}
me.cls = cls.join(' ');
// Menu body classes
- var bodyCls = me.bodyCls ? [me.bodyCls] : [];
bodyCls.unshift(prefix + 'menu-body');
me.bodyCls = bodyCls.join(' ');
@@ -275,7 +282,7 @@ Ext.define('Ext.menu.Menu', {
// floating elements inherit their parent's width, making them the width of
// document.body instead of the width of their contents.
// This includes left/right dock items.
- if ((!Ext.iStrict && Ext.isIE) || Ext.isIE6) {
+ if ((!Ext.isStrict && Ext.isIE) || Ext.isIE6) {
var innerCt = me.layout.getRenderTarget(),
innerCtWidth = 0,
dis = me.dockedItems,
@@ -299,8 +306,12 @@ Ext.define('Ext.menu.Menu', {
me.el.setWidth(newWidth);
}
},
+
+ getBubbleTarget: function(){
+ return this.parentMenu || this.callParent();
+ },
- /**
+ /**
* Returns whether a menu item can be activated or not.
* @return {Boolean}
*/
@@ -308,7 +319,7 @@ Ext.define('Ext.menu.Menu', {
return item && !item.isDisabled() && item.isVisible() && (item.canActivate || item.getXTypes().indexOf('menuitem') < 0);
},
- /**
+ /**
* Deactivates the current active item on the menu, if one exists.
*/
deactivateActiveItem: function() {
@@ -320,7 +331,9 @@ Ext.define('Ext.menu.Menu', {
delete me.activeItem;
}
}
- if (me.focusedItem) {
+
+ // only blur if focusedItem is not a filter
+ if (me.focusedItem && !me.filtered) {
me.focusedItem.blur();
if (!me.focusedItem.$focused) {
delete me.focusedItem;
@@ -328,6 +341,47 @@ Ext.define('Ext.menu.Menu', {
}
},
+ clearStretch: function () {
+ // the vbox/stretchmax will set the el sizes and subsequent layouts will not
+ // reconsider them unless we clear the dimensions on the el's here:
+ if (this.rendered) {
+ this.items.each(function (item) {
+ // each menuItem component needs to layout again, so clear its cache
+ if (item.componentLayout) {
+ delete item.componentLayout.lastComponentSize;
+ }
+ if (item.el) {
+ item.el.setWidth(null);
+ }
+ });
+ }
+ },
+
+ onAdd: function () {
+ var me = this;
+
+ me.clearStretch();
+ me.callParent(arguments);
+
+ if (Ext.isIE6 || Ext.isIE7) {
+ // TODO - why does this need to be done (and not ok to do now)?
+ Ext.Function.defer(me.doComponentLayout, 10, me);
+ }
+ },
+
+ onRemove: function () {
+ this.clearStretch();
+ this.callParent(arguments);
+
+ },
+
+ redoComponentLayout: function () {
+ if (this.rendered) {
+ this.clearStretch();
+ this.doComponentLayout();
+ }
+ },
+
// inherit docs
getFocusEl: function() {
return this.focusEl;
@@ -363,7 +417,9 @@ Ext.define('Ext.menu.Menu', {
// private
lookupItemFromObject: function(cmp) {
var me = this,
- prefix = Ext.baseCSSPrefix;
+ prefix = Ext.baseCSSPrefix,
+ cls,
+ intercept;
if (!cmp.isComponent) {
if (!cmp.xtype) {
@@ -378,11 +434,8 @@ Ext.define('Ext.menu.Menu', {
}
if (!cmp.isMenuItem && !cmp.dock) {
- var cls = [
- prefix + 'menu-item',
- prefix + 'menu-item-cmp'
- ],
- intercept = Ext.Function.createInterceptor;
+ cls = [prefix + 'menu-item', prefix + 'menu-item-cmp'];
+ intercept = Ext.Function.createInterceptor;
// Wrap focus/blur to control component focus
cmp.focus = intercept(cmp.focus, function() {
@@ -516,48 +569,54 @@ Ext.define('Ext.menu.Menu', {
}
},
- /**
- * Shows the floating menu by the specified {@link Ext.Component Component} or {@link Ext.core.Element Element}.
- * @param {Mixed component} The {@link Ext.Component} or {@link Ext.core.Element} to show the menu by.
- * @param {String} position (optional) Alignment position as used by {@link Ext.core.Element#getAlignToXY Ext.core.Element.getAlignToXY}. Defaults to `{@link #defaultAlign}`.
- * @param {Array} offsets (optional) Alignment offsets as used by {@link Ext.core.Element#getAlignToXY Ext.core.Element.getAlignToXY}. Defaults to `undefined`.
- * @return {Menu} This Menu.
- * @markdown
+ /**
+ * Shows the floating menu by the specified {@link Ext.Component Component} or {@link Ext.Element Element}.
+ * @param {Ext.Component/Ext.Element} component The {@link Ext.Component} or {@link Ext.Element} to show the menu by.
+ * @param {String} position (optional) Alignment position as used by {@link Ext.Element#getAlignToXY}.
+ * Defaults to `{@link #defaultAlign}`.
+ * @param {Number[]} offsets (optional) Alignment offsets as used by {@link Ext.Element#getAlignToXY}. Defaults to `undefined`.
+ * @return {Ext.menu.Menu} This Menu.
*/
showBy: function(cmp, pos, off) {
- var me = this;
+ var me = this,
+ xy,
+ region;
if (me.floating && cmp) {
me.layout.autoSize = true;
- me.show();
+
+ // show off-screen first so that we can calc position without causing a visual jump
+ me.doAutoRender();
+ delete me.needsLayout;
// Component or Element
cmp = cmp.el || cmp;
// Convert absolute to floatParent-relative coordinates if necessary.
- var xy = me.el.getAlignToXY(cmp, pos || me.defaultAlign, off);
+ 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;
+ region = me.floatParent.getTargetEl().getViewRegion();
+ xy[0] -= region.x;
+ xy[1] -= region.y;
}
me.showAt(xy);
- me.doConstrain();
}
return me;
},
doConstrain : function() {
var me = this,
- y = this.el.getY(),
+ y = me.el.getY(),
max, full,
+ vector,
returnY = y, normalY, parentEl, scrollTop, viewHeight;
delete me.height;
me.setSize();
full = me.getHeight();
if (me.floating) {
- parentEl = Ext.fly(me.el.dom.parentNode);
+ //if our reset css is scoped, there will be a x-reset wrapper on this menu which we need to skip
+ parentEl = Ext.fly(me.el.getScopeParent());
scrollTop = parentEl.getScroll().top;
viewHeight = parentEl.getViewSize().height;
//Normalize y by the scroll position for the parent element. Need to move it into the coordinate space
@@ -586,6 +645,13 @@ Ext.define('Ext.menu.Menu', {
me.iconSepEl.setHeight(me.layout.getRenderTarget().dom.scrollHeight);
}
}
+ vector = me.getConstrainVector(me.el.getScopeParent());
+ if (vector) {
+ me.setPosition(me.getPosition()[0] + vector[0]);
+ }
me.el.setY(returnY);
}
-});