Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / Menu.html
index 756c50c..afd1ff2 100644 (file)
@@ -1,11 +1,17 @@
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.layout.MenuLayout"></div>/**\r
+<html>
+<head>
+  <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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.layout.MenuLayout"></div>/**\r
  * @class Ext.layout.MenuLayout\r
  * @extends Ext.layout.ContainerLayout\r
  * <p>Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.</p>\r
@@ -15,6 +21,9 @@
 \r
     setContainer : function(ct){\r
         this.monitorResize = !ct.floating;\r
+        // This event is only fired by the menu in IE, used so we don't couple\r
+        // the menu with the layout.\r
+        ct.on('autosize', this.doAutoSize, this);\r
         Ext.layout.MenuLayout.superclass.setContainer.call(this, ct);\r
     },\r
 \r
                 this.itemTpl.append(target, a, true));\r
 \r
 //          Link the containing <li> to the item.\r
-            c.positionEl.menuItemId = c.itemId || c.id;\r
+            c.positionEl.menuItemId = c.getItemId();\r
 \r
 //          If rendering a regular Component, and it needs an icon,\r
 //          move the Component rightwards.\r
             if (!a.isMenuItem && a.needsIcon) {\r
                 c.positionEl.addClass('x-menu-list-item-indent');\r
             }\r
+            this.configureItem(c, position);\r
         }else if(c && !this.isValidParent(c, target)){\r
             if(Ext.isNumber(position)){\r
                 position = target.dom.childNodes[position];\r
@@ -64,7 +74,7 @@
             icon: c.icon || Ext.BLANK_IMAGE_URL,\r
             iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),\r
             itemId: 'x-menu-el-' + c.id,\r
-            itemCls: 'x-menu-list-item ' + (this.extraCls || '')\r
+            itemCls: 'x-menu-list-item '\r
         };\r
     },\r
 \r
@@ -171,6 +181,12 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
      * configuration. Defaults to <tt>[0, 0]</tt>.\r
      */\r
     defaultOffsets : [0, 0],\r
+    \r
+    <div id="cfg-Ext.menu.Menu-plain"></div>/**\r
+     * @cfg {Boolean} plain\r
+     * True to remove the incised line down the left side of the menu. Defaults to <tt>false</tt>.\r
+     */\r
+    plain : false,\r
 \r
     <div id="cfg-Ext.menu.Menu-floating"></div>/**\r
      * @cfg {Boolean} floating\r
@@ -323,7 +339,7 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
         if(t){\r
             if(t.isFormField){\r
                 this.setActiveItem(t);\r
-            }else{\r
+            }else if(t instanceof Ext.menu.BaseItem){\r
                 if(t.menu && this.ignoreParentClicks){\r
                     t.expandMenu();\r
                     e.preventDefault();\r
@@ -429,7 +445,7 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
 \r
     <div id="method-Ext.menu.Menu-show"></div>/**\r
      * If <code>{@link #floating}=true</code>, shows this menu relative to\r
-     * another element, otherwise uses {@link Ext.Component#show}.\r
+     * another element using {@link #showat}, otherwise uses {@link Ext.Component#show}.\r
      * @param {Mixed} element The element to align to\r
      * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to\r
      * the element (defaults to this.defaultAlign)\r
@@ -442,39 +458,48 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
                 this.render();\r
                 this.doLayout(false, true);\r
             }\r
-            if(this.fireEvent('beforeshow', this) !== false){\r
-                this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign, this.defaultOffsets), parentMenu, false);\r
-            }\r
+            this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign, this.defaultOffsets), parentMenu);\r
         }else{\r
             Ext.menu.Menu.superclass.show.call(this);\r
         }\r
     },\r
 \r
     <div id="method-Ext.menu.Menu-showAt"></div>/**\r
-     * Displays this menu at a specific xy position\r
+     * Displays this menu at a specific xy position and fires the 'show' event if a\r
+     * handler for the 'beforeshow' event does not return false cancelling the operation.\r
      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)\r
      * @param {Ext.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)\r
      */\r
-    showAt : function(xy, parentMenu, /* private: */_e){\r
-        this.parentMenu = parentMenu;\r
-        if(!this.el){\r
-            this.render();\r
-        }\r
-        this.el.setXY(xy);\r
-        if(this.enableScrolling){\r
-            this.constrainScroll(xy[1]);\r
-        }\r
-        this.el.show();\r
-        Ext.menu.Menu.superclass.onShow.call(this);\r
-        if(Ext.isIE){\r
-            this.layout.doAutoSize();\r
-            if(!Ext.isIE8){\r
-                this.el.repaint();\r
+    showAt : function(xy, parentMenu){\r
+        if(this.fireEvent('beforeshow', this) !== false){\r
+            this.parentMenu = parentMenu;\r
+            if(!this.el){\r
+                this.render();\r
             }\r
+            if(this.enableScrolling){\r
+                // set the position so we can figure out the constrain value.\r
+                this.el.setXY(xy);\r
+                //constrain the value, keep the y coordinate the same\r
+                this.constrainScroll(xy[1]);\r
+                xy = [this.el.adjustForConstraints(xy)[0], xy[1]];\r
+            }else{\r
+                //constrain to the viewport.\r
+                xy = this.el.adjustForConstraints(xy);\r
+            }\r
+            this.el.setXY(xy);\r
+            this.el.show();\r
+            Ext.menu.Menu.superclass.onShow.call(this);\r
+            if(Ext.isIE){\r
+                // internal event, used so we don't couple the layout to the menu\r
+                this.fireEvent('autosize', this);\r
+                if(!Ext.isIE8){\r
+                    this.el.repaint();\r
+                }\r
+            }\r
+            this.hidden = false;\r
+            this.focus();\r
+            this.fireEvent('show', this);\r
         }\r
-        this.hidden = false;\r
-        this.focus();\r
-        this.fireEvent('show', this);\r
     },\r
 \r
     constrainScroll : function(y){\r
@@ -566,8 +591,13 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
         if(this.el && this.floating){\r
             this.el.hide();\r
         }\r
-        if(this.deepHide === true && this.parentMenu){\r
-            this.parentMenu.hide(true);\r
+        var pm = this.parentMenu;\r
+        if(this.deepHide === true && pm){\r
+            if(pm.floating){\r
+                pm.hide(true);\r
+            }else{\r
+                pm.deactivateActive();\r
+            }\r
         }\r
     },\r
 \r
@@ -671,6 +701,11 @@ Ext.menu.Menu = Ext.extend(Ext.Container, {
         if(s){\r
             Ext.destroy(s.topRepeater, s.bottomRepeater, s.top, s.bottom);\r
         }\r
+        Ext.destroy(\r
+            this.el,\r
+            this.focusEl,\r
+            this.ul\r
+        );\r
     }\r
 });\r
 \r
@@ -742,6 +777,7 @@ Ext.menu.MenuNav = Ext.extend(Ext.KeyNav, function(){
             }\r
         }\r
     };\r
-}());</pre>    \r
-</body>\r
+}());\r
+</pre>
+</body>
 </html>
\ No newline at end of file