git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Menu2.html
diff --git a/docs/source/Menu2.html b/docs/source/Menu2.html
index cd93875..cba02d5 100644 (file)
--- a/docs/source/Menu2.html
+++ b/docs/source/Menu2.html
@@ -1,54 +1,63 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-menu.Menu-method-constructor'><span id='Ext-menu.Menu'>/**
-</span></span> * @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}.
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-menu-Menu'>/**
+</span> * 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},
  *
  * 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}.
  * 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',
  */
 Ext.define('Ext.menu.Menu', {
     extend: 'Ext.panel.Panel',
@@ -63,121 +72,121 @@ Ext.define('Ext.menu.Menu', {
         'Ext.menu.Separator'
     ],
 
         'Ext.menu.Separator'
     ],
 
-<span id='Ext-menu.Menu-cfg-allowOtherMenus'>    /**
+<span id='Ext-menu-Menu-property-parentMenu'>    /**
+</span>     * @property {Ext.menu.Menu} parentMenu
+     * The parent Menu of this Menu.
+     */
+
+<span id='Ext-menu-Menu-cfg-allowOtherMenus'>    /**
 </span>     * @cfg {Boolean} allowOtherMenus
 </span>     * @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,
 
      */
     allowOtherMenus: false,
 
-<span id='Ext-menu.Menu-cfg-ariaRole'>    /**
+<span id='Ext-menu-Menu-cfg-ariaRole'>    /**
 </span>     * @cfg {String} ariaRole @hide
      */
     ariaRole: 'menu',
 
 </span>     * @cfg {String} ariaRole @hide
      */
     ariaRole: 'menu',
 
-<span id='Ext-menu.Menu-cfg-autoRender'>    /**
+<span id='Ext-menu-Menu-cfg-autoRender'>    /**
 </span>     * @cfg {Boolean} autoRender @hide
      * floating is true, so autoRender always happens
      */
 
 </span>     * @cfg {Boolean} autoRender @hide
      * floating is true, so autoRender always happens
      */
 
-<span id='Ext-menu.Menu-cfg-defaultAlign'>    /**
+<span id='Ext-menu-Menu-cfg-defaultAlign'>    /**
 </span>     * @cfg {String} defaultAlign
 </span>     * @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?',
 
      */
     defaultAlign: 'tl-bl?',
 
-<span id='Ext-menu.Menu-cfg-floating'>    /**
+<span id='Ext-menu-Menu-cfg-floating'>    /**
 </span>     * @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}.
 </span>     * @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,
 
      */
     floating: true,
 
-<span id='Ext-menu.Menu-cfg-constrain'>    /**
+<span id='Ext-menu-Menu-cfg-constrain'>    /**
 </span>     * @cfg {Boolean} @hide
 </span>     * @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,
 
 
-<span id='Ext-menu.Menu-cfg-hidden'>    /**
-</span>     * @cfg {Boolean} hidden
+<span id='Ext-menu-Menu-cfg-hidden'>    /**
+</span>     * @cfg {Boolean} [hidden=undefined]
      * True to initially render the Menu as hidden, requiring to be shown manually.
      * 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`.
      * Defaults to `true` when `floating: true`, and defaults to `false` when `floating: false`.
-     * @markdown
      */
     hidden: true,
 
      */
     hidden: true,
 
-<span id='Ext-menu.Menu-cfg-ignoreParentClicks'>    /**
+    hideMode: 'visibility',
+
+<span id='Ext-menu-Menu-cfg-ignoreParentClicks'>    /**
 </span>     * @cfg {Boolean} ignoreParentClicks
      * True to ignore clicks on any item in this menu that is a parent item (displays a submenu)
 </span>     * @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,
 
      */
     ignoreParentClicks: false,
 
     isMenu: true,
 
-<span id='Ext-menu.Menu-cfg-layout'>    /**
+<span id='Ext-menu-Menu-cfg-layout'>    /**
 </span>     * @cfg {String/Object} layout @hide
      */
 
 </span>     * @cfg {String/Object} layout @hide
      */
 
-<span id='Ext-menu.Menu-cfg-showSeparator'>    /**
-</span>     * @cfg {Boolean} showSeparator True to show the icon separator. (defaults to true).
+<span id='Ext-menu-Menu-cfg-showSeparator'>    /**
+</span>     * @cfg {Boolean} showSeparator
+     * True to show the icon separator.
      */
     showSeparator : true,
 
      */
     showSeparator : true,
 
-<span id='Ext-menu.Menu-cfg-minWidth'>    /**
+<span id='Ext-menu-Menu-cfg-minWidth'>    /**
 </span>     * @cfg {Number} minWidth
 </span>     * @cfg {Number} minWidth
-     * The minimum width of the Menu. Defaults to `120`.
-     * @markdown
+     * The minimum width of the Menu.
      */
     minWidth: 120,
 
      */
     minWidth: 120,
 
-<span id='Ext-menu.Menu-cfg-plain'>    /**
-</span>     * @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
+<span id='Ext-menu-Menu-cfg-plain'>    /**
+</span>     * @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,
      */
 
     initComponent: function() {
         var me = this,
-            prefix = Ext.baseCSSPrefix;
+            prefix = Ext.baseCSSPrefix,
+            cls = [prefix + 'menu'],
+            bodyCls = me.bodyCls ? [me.bodyCls] : [];
 
         me.addEvents(
 
         me.addEvents(
-<span id='Ext-menu.Menu-event-click'>            /**
+<span id='Ext-menu-Menu-event-click'>            /**
 </span>             * @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}.
 </span>             * @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',
 
              */
             'click',
 
-<span id='Ext-menu.Menu-event-mouseenter'>            /**
+<span id='Ext-menu-Menu-event-mouseenter'>            /**
 </span>             * @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}
 </span>             * @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',
 
              */
             'mouseenter',
 
-<span id='Ext-menu.Menu-event-mouseleave'>            /**
+<span id='Ext-menu-Menu-event-mouseleave'>            /**
 </span>             * @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}
 </span>             * @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',
 
              */
             'mouseleave',
 
-<span id='Ext-menu.Menu-event-mouseover'>            /**
+<span id='Ext-menu-Menu-event-mouseover'>            /**
 </span>             * @event mouseover
              * Fires when the mouse is hovering over this menu
              * @param {Ext.menu.Menu} menu The menu
 </span>             * @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
         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
         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(' ');
 
         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.
         // 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 &amp;&amp; Ext.isIE) || Ext.isIE6) {
+        if ((!Ext.isStrict &amp;&amp; Ext.isIE) || Ext.isIE6) {
             var innerCt = me.layout.getRenderTarget(),
                 innerCtWidth = 0,
                 dis = me.dockedItems,
             var innerCt = me.layout.getRenderTarget(),
                 innerCtWidth = 0,
                 dis = me.dockedItems,
@@ -299,8 +306,12 @@ Ext.define('Ext.menu.Menu', {
             me.el.setWidth(newWidth);
         }
     },
             me.el.setWidth(newWidth);
         }
     },
+    
+    getBubbleTarget: function(){
+        return this.parentMenu || this.callParent();
+    },
 
 
-<span id='Ext-menu.Menu-method-canActivateItem'>    /**
+<span id='Ext-menu-Menu-method-canActivateItem'>    /**
 </span>     * Returns whether a menu item can be activated or not.
      * @return {Boolean}
      */
 </span>     * Returns whether a menu item can be activated or not.
      * @return {Boolean}
      */
@@ -308,7 +319,7 @@ Ext.define('Ext.menu.Menu', {
         return item &amp;&amp; !item.isDisabled() &amp;&amp; item.isVisible() &amp;&amp; (item.canActivate || item.getXTypes().indexOf('menuitem') &lt; 0);
     },
 
         return item &amp;&amp; !item.isDisabled() &amp;&amp; item.isVisible() &amp;&amp; (item.canActivate || item.getXTypes().indexOf('menuitem') &lt; 0);
     },
 
-<span id='Ext-menu.Menu-method-deactivateActiveItem'>    /**
+<span id='Ext-menu-Menu-method-deactivateActiveItem'>    /**
 </span>     * Deactivates the current active item on the menu, if one exists.
      */
     deactivateActiveItem: function() {
 </span>     * 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;
             }
         }
                 delete me.activeItem;
             }
         }
-        if (me.focusedItem) {
+
+        // only blur if focusedItem is not a filter
+        if (me.focusedItem &amp;&amp; !me.filtered) {
             me.focusedItem.blur();
             if (!me.focusedItem.$focused) {
                 delete me.focusedItem;
             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;
     // inherit docs
     getFocusEl: function() {
         return this.focusEl;
@@ -363,7 +417,9 @@ Ext.define('Ext.menu.Menu', {
     // private
     lookupItemFromObject: function(cmp) {
         var me = this,
     // private
     lookupItemFromObject: function(cmp) {
         var me = this,
-            prefix = Ext.baseCSSPrefix;
+            prefix = Ext.baseCSSPrefix,
+            cls,
+            intercept;
 
         if (!cmp.isComponent) {
             if (!cmp.xtype) {
 
         if (!cmp.isComponent) {
             if (!cmp.xtype) {
@@ -378,11 +434,8 @@ Ext.define('Ext.menu.Menu', {
         }
 
         if (!cmp.isMenuItem &amp;&amp; !cmp.dock) {
         }
 
         if (!cmp.isMenuItem &amp;&amp; !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() {
 
             // Wrap focus/blur to control component focus
             cmp.focus = intercept(cmp.focus, function() {
@@ -516,48 +569,54 @@ Ext.define('Ext.menu.Menu', {
         }
     },
 
         }
     },
 
-<span id='Ext-menu.Menu-method-showBy'>    /**
-</span>     * 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
+<span id='Ext-menu-Menu-method-showBy'>    /**
+</span>     * 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) {
      */
     showBy: function(cmp, pos, off) {
-        var me = this;
+        var me = this,
+            xy,
+            region;
 
         if (me.floating &amp;&amp; cmp) {
             me.layout.autoSize = true;
 
         if (me.floating &amp;&amp; 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.
 
             // 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) {
             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.showAt(xy);
-            me.doConstrain();
         }
         return me;
     },
 
     doConstrain : function() {
         var me = this,
         }
         return me;
     },
 
     doConstrain : function() {
         var me = this,
-            y = this.el.getY(),
+            y = me.el.getY(),
             max, full,
             max, full,
+            vector,
             returnY = y, normalY, parentEl, scrollTop, viewHeight;
 
         delete me.height;
         me.setSize();
         full = me.getHeight();
         if (me.floating) {
             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
             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);
             }
         }
                 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);
     }
         me.el.setY(returnY);
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});
+</pre>
+</body>
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.