Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / BaseItem.html
index 266b2f5..3d4b159 100644 (file)
@@ -1,11 +1,18 @@
-<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.menu.BaseItem"></div>/**
+<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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.menu.BaseItem"></div>/**
  * @class Ext.menu.BaseItem
  * @extends Ext.Component
  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
  * @class Ext.menu.BaseItem
  * @extends Ext.Component
  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
  * @param {Object} config Configuration options
  * @xtype menubaseitem
  */
  * @param {Object} config Configuration options
  * @xtype menubaseitem
  */
-Ext.menu.BaseItem = function(config){
-    Ext.menu.BaseItem.superclass.constructor.call(this, config);
-
-    this.addEvents(
-        <div id="event-Ext.menu.BaseItem-click"></div>/**
-         * @event click
-         * Fires when this item is clicked
-         * @param {Ext.menu.BaseItem} this
-         * @param {Ext.EventObject} e
-         */
-        'click',
-        <div id="event-Ext.menu.BaseItem-activate"></div>/**
-         * @event activate
-         * Fires when this item is activated
-         * @param {Ext.menu.BaseItem} this
-         */
-        'activate',
-        <div id="event-Ext.menu.BaseItem-deactivate"></div>/**
-         * @event deactivate
-         * Fires when this item is deactivated
-         * @param {Ext.menu.BaseItem} this
-         */
-        'deactivate'
-    );
-
-    if(this.handler){
-        this.on("click", this.handler, this.scope);
-    }
-};
-
-Ext.extend(Ext.menu.BaseItem, Ext.Component, {
+Ext.menu.BaseItem = Ext.extend(Ext.Component, {
     <div id="prop-Ext.menu.BaseItem-parentMenu"></div>/**
      * @property parentMenu
      * @type Ext.menu.Menu
     <div id="prop-Ext.menu.BaseItem-parentMenu"></div>/**
      * @property parentMenu
      * @type Ext.menu.Menu
@@ -76,7 +53,7 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
      */
     hideOnClick : true,
     <div id="cfg-Ext.menu.BaseItem-clickHideDelay"></div>/**
      */
     hideOnClick : true,
     <div id="cfg-Ext.menu.BaseItem-clickHideDelay"></div>/**
-     * @cfg {Number} clickHideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
+     * @cfg {Number} clickHideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 1)
      */
     clickHideDelay : 1,
 
      */
     clickHideDelay : 1,
 
@@ -86,6 +63,34 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
     // private
     actionMode : "container",
 
     // private
     actionMode : "container",
 
+    initComponent : function(){
+        Ext.menu.BaseItem.superclass.initComponent.call(this);
+        this.addEvents(
+            <div id="event-Ext.menu.BaseItem-click"></div>/**
+             * @event click
+             * Fires when this item is clicked
+             * @param {Ext.menu.BaseItem} this
+             * @param {Ext.EventObject} e
+             */
+            'click',
+            <div id="event-Ext.menu.BaseItem-activate"></div>/**
+             * @event activate
+             * Fires when this item is activated
+             * @param {Ext.menu.BaseItem} this
+             */
+            'activate',
+            <div id="event-Ext.menu.BaseItem-deactivate"></div>/**
+             * @event deactivate
+             * Fires when this item is deactivated
+             * @param {Ext.menu.BaseItem} this
+             */
+            'deactivate'
+        );
+        if(this.handler){
+            this.on("click", this.handler, this.scope);
+        }
+    },
+
     // private
     onRender : function(container, position){
         Ext.menu.BaseItem.superclass.onRender.apply(this, arguments);
     // private
     onRender : function(container, position){
         Ext.menu.BaseItem.superclass.onRender.apply(this, arguments);
@@ -93,9 +98,12 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
             this.parentMenu = this.ownerCt;
         }else{
             this.container.addClass('x-menu-list-item');
             this.parentMenu = this.ownerCt;
         }else{
             this.container.addClass('x-menu-list-item');
-            this.mon(this.el, 'click', this.onClick, this);
-            this.mon(this.el, 'mouseenter', this.activate, this);
-            this.mon(this.el, 'mouseleave', this.deactivate, this);
+            this.mon(this.el, {
+                scope: this,
+                click: this.onClick,
+                mouseenter: this.activate,
+                mouseleave: this.deactivate
+            });
         }
     },
 
         }
     },
 
@@ -103,7 +111,7 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
      * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}
      * config property).  If an existing handler is already registered, it will be unregistered for you.
      * @param {Function} handler The function that should be called on click
      * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}
      * config property).  If an existing handler is already registered, it will be unregistered for you.
      * @param {Function} handler The function that should be called on click
-     * @param {Object} scope The scope that should be passed to the handler
+     * @param {Object} scope The scope (<code>this</code> reference) in which the handler function is executed. Defaults to this menu item.
      */
     setHandler : function(handler, scope){
         if(this.handler){
      */
     setHandler : function(handler, scope){
         if(this.handler){
@@ -147,8 +155,13 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
 
     // private
     handleClick : function(e){
 
     // private
     handleClick : function(e){
+        var pm = this.parentMenu;
         if(this.hideOnClick){
         if(this.hideOnClick){
-            this.parentMenu.hide.defer(this.clickHideDelay, this.parentMenu, [true]);
+            if(pm.floating){
+                pm.hide.defer(this.clickHideDelay, pm, [true]);
+            }else{
+                pm.deactivateActive();
+            }
         }
     },
 
         }
     },
 
@@ -158,6 +171,6 @@ Ext.extend(Ext.menu.BaseItem, Ext.Component, {
     // private. Do nothing
     hideMenu : Ext.emptyFn
 });
     // private. Do nothing
     hideMenu : Ext.emptyFn
 });
-Ext.reg('menubaseitem', Ext.menu.BaseItem);</pre>    \r
-</body>\r
+Ext.reg('menubaseitem', Ext.menu.BaseItem);</pre>    
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file