Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / KeyNav.html
index cba9cd8..b1dcf11 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <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>
+  <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();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-menu-KeyNav'>/**
+</span> * @class Ext.menu.KeyNav
+ * @private
  */
-<div id="cls-Ext.KeyNav"></div>/**
- * @class Ext.KeyNav
- * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
- * navigation keys to function calls that will get called when the keys are pressed, providing an easy
- * way to implement custom navigation schemes for any UI component.</p>
- * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
- * pageUp, pageDown, del, home, end.  Usage:</p>
- <pre><code>
-var nav = new Ext.KeyNav("my-element", {
-    "left" : function(e){
-        this.moveLeft(e.ctrlKey);
-    },
-    "right" : function(e){
-        this.moveRight(e.ctrlKey);
-    },
-    "enter" : function(e){
-        this.save();
+Ext.define('Ext.menu.KeyNav', {
+    extend: 'Ext.util.KeyNav',
+
+    requires: ['Ext.FocusManager'],
+    
+    constructor: function(menu) {
+        var me = this;
+
+        me.menu = menu;
+        me.callParent([menu.el, {
+            down: me.down,
+            enter: me.enter,
+            esc: me.escape,
+            left: me.left,
+            right: me.right,
+            space: me.enter,
+            tab: me.tab,
+            up: me.up
+        }]);
     },
-    scope : this
-});
-</code></pre>
- * @constructor
- * @param {Mixed} el The element to bind to
- * @param {Object} config The config
- */
-Ext.KeyNav = function(el, config){
-    this.el = Ext.get(el);
-    Ext.apply(this, config);
-    if(!this.disabled){
-        this.disabled = true;
-        this.enable();
-    }
-};
-
-Ext.KeyNav.prototype = {
-    <div id="cfg-Ext.KeyNav-disabled"></div>/**
-     * @cfg {Boolean} disabled
-     * True to disable this KeyNav instance (defaults to false)
-     */
-    disabled : false,
-    <div id="cfg-Ext.KeyNav-defaultEventAction"></div>/**
-     * @cfg {String} defaultEventAction
-     * The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key.  Valid values are
-     * {@link Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and
-     * {@link Ext.EventObject#stopPropagation} (defaults to 'stopEvent')
-     */
-    defaultEventAction: "stopEvent",
-    <div id="cfg-Ext.KeyNav-forceKeyDown"></div>/**
-     * @cfg {Boolean} forceKeyDown
-     * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
-     * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
-     * handle keydown instead of keypress.
-     */
-    forceKeyDown : false,
-
-    // private
-    relay : function(e){
-        var k = e.getKey(),
-            h = this.keyToHandler[k];
-        if(h && this[h]){
-            if(this.doRelay(e, this[h], h) !== true){
-                e[this.defaultEventAction]();
-            }
+
+    down: function(e) {
+        var me = this,
+            fi = me.menu.focusedItem;
+
+        if (fi &amp;&amp; e.getKey() == Ext.EventObject.DOWN &amp;&amp; me.isWhitelisted(fi)) {
+            return true;
         }
+        me.focusNextItem(1);
     },
 
-    // private
-    doRelay : function(e, h, hname){
-        return h.call(this.scope || this, e, hname);
+    enter: function(e) {
+        var menu = this.menu,
+            focused = menu.focusedItem;
+        if (menu.activeItem) {
+            menu.onClick(e);
+        } else if (focused &amp;&amp; focused.isFormField) {
+            // prevent stopEvent being called
+            return true;
+        }
     },
 
-    // possible handlers
-    enter : false,
-    left : false,
-    right : false,
-    up : false,
-    down : false,
-    tab : false,
-    esc : false,
-    pageUp : false,
-    pageDown : false,
-    del : false,
-    home : false,
-    end : false,
-
-    // quick lookup hash
-    keyToHandler : {
-        37 : "left",
-        39 : "right",
-        38 : "up",
-        40 : "down",
-        33 : "pageUp",
-        34 : "pageDown",
-        46 : "del",
-        36 : "home",
-        35 : "end",
-        13 : "enter",
-        27 : "esc",
-        9  : "tab"
+    escape: function(e) {
+        Ext.menu.Manager.hideAll();
     },
-    
-    stopKeyUp: function(e) {
-        var k = e.getKey();
 
-        if (k >= 37 && k <= 40) {
-            // *** bugfix - safari 2.x fires 2 keyup events on cursor keys
-            // *** (note: this bugfix sacrifices the "keyup" event originating from keyNav elements in Safari 2)
-            e.stopEvent();
+    focusNextItem: function(step) {
+        var menu = this.menu,
+            items = menu.items,
+            focusedItem = menu.focusedItem,
+            startIdx = focusedItem ? items.indexOf(focusedItem) : -1,
+            idx = startIdx + step;
+
+        while (idx != startIdx) {
+            if (idx &lt; 0) {
+                idx = items.length - 1;
+            } else if (idx &gt;= items.length) {
+                idx = 0;
+            }
+
+            var item = items.getAt(idx);
+            if (menu.canActivateItem(item)) {
+                menu.setActiveItem(item);
+                break;
+            }
+            idx += step;
         }
     },
-    
-    <div id="method-Ext.KeyNav-destroy"></div>/**
-     * Destroy this KeyNav (this is the same as calling disable).
-     */
-    destroy: function(){
-        this.disable();    
+
+    isWhitelisted: function(item) {
+        return Ext.FocusManager.isWhitelisted(item);
     },
 
-       <div id="method-Ext.KeyNav-enable"></div>/**
-        * Enable this KeyNav
-        */
-       enable: function() {
-        if (this.disabled) {
-            if (Ext.isSafari2) {
-                // call stopKeyUp() on "keyup" event
-                this.el.on('keyup', this.stopKeyUp, this);
-            }
+    left: function(e) {
+        var menu = this.menu,
+            fi = menu.focusedItem,
+            ai = menu.activeItem;
+
+        if (fi &amp;&amp; this.isWhitelisted(fi)) {
+            return true;
+        }
 
-            this.el.on(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
-            this.disabled = false;
+        menu.hide();
+        if (menu.parentMenu) {
+            menu.parentMenu.focus();
         }
     },
 
-       <div id="method-Ext.KeyNav-disable"></div>/**
-        * Disable this KeyNav
-        */
-       disable: function() {
-        if (!this.disabled) {
-            if (Ext.isSafari2) {
-                // remove "keyup" event handler
-                this.el.un('keyup', this.stopKeyUp, this);
-            }
+    right: function(e) {
+        var menu = this.menu,
+            fi = menu.focusedItem,
+            ai = menu.activeItem,
+            am;
+
+        if (fi &amp;&amp; this.isWhitelisted(fi)) {
+            return true;
+        }
 
-            this.el.un(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
-            this.disabled = true;
+        if (ai) {
+            am = menu.activeItem.menu;
+            if (am) {
+                ai.expandMenu(0);
+                Ext.defer(function() {
+                    am.setActiveItem(am.items.getAt(0));
+                }, 25);
+            }
         }
     },
-    
-    <div id="method-Ext.KeyNav-setDisabled"></div>/**
-     * Convenience function for setting disabled/enabled by boolean.
-     * @param {Boolean} disabled
-     */
-    setDisabled : function(disabled){
-        this[disabled ? "disable" : "enable"]();
+
+    tab: function(e) {
+        var me = this;
+
+        if (e.shiftKey) {
+            me.up(e);
+        } else {
+            me.down(e);
+        }
     },
-    
-    // private
-    isKeydown: function(){
-        return this.forceKeyDown || Ext.EventManager.useKeydown;
+
+    up: function(e) {
+        var me = this,
+            fi = me.menu.focusedItem;
+
+        if (fi &amp;&amp; e.getKey() == Ext.EventObject.UP &amp;&amp; me.isWhitelisted(fi)) {
+            return true;
+        }
+        me.focusNextItem(-1);
     }
-};
-</pre>    
+});</pre>
 </body>
-</html>
\ No newline at end of file
+</html>