docs/source/KeyNav.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.KeyNav"></div>/**
  15  * @class Ext.KeyNav
  16  * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
  17  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
  18  * way to implement custom navigation schemes for any UI component.</p>
  19  * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
  20  * pageUp, pageDown, del, home, end.  Usage:</p>
  21  <pre><code>
  22 var nav = new Ext.KeyNav("my-element", {
  23     "left" : function(e){
  24         this.moveLeft(e.ctrlKey);
  25     },
  26     "right" : function(e){
  27         this.moveRight(e.ctrlKey);
  28     },
  29     "enter" : function(e){
  30         this.save();
  31     },
  32     scope : this
  33 });
  34 </code></pre>
  35  * @constructor
  36  * @param {Mixed} el The element to bind to
  37  * @param {Object} config The config
  38  */
  39 Ext.KeyNav = function(el, config){
  40     this.el = Ext.get(el);
  41     Ext.apply(this, config);
  42     if(!this.disabled){
  43         this.disabled = true;
  44         this.enable();
  45     }
  46 };
  47
  48 Ext.KeyNav.prototype = {
  49     <div id="cfg-Ext.KeyNav-disabled"></div>/**
  50      * @cfg {Boolean} disabled
  51      * True to disable this KeyNav instance (defaults to false)
  52      */
  53     disabled : false,
  54     <div id="cfg-Ext.KeyNav-defaultEventAction"></div>/**
  55      * @cfg {String} defaultEventAction
  56      * The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key.  Valid values are
  57      * {@link Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and
  58      * {@link Ext.EventObject#stopPropagation} (defaults to 'stopEvent')
  59      */
  60     defaultEventAction: "stopEvent",
  61     <div id="cfg-Ext.KeyNav-forceKeyDown"></div>/**
  62      * @cfg {Boolean} forceKeyDown
  63      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
  64      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
  65      * handle keydown instead of keypress.
  66      */
  67     forceKeyDown : false,
  68
  69     // private
  70     relay : function(e){
  71         var k = e.getKey();
  72         var h = this.keyToHandler[k];
  73         if(h && this[h]){
  74             if(this.doRelay(e, this[h], h) !== true){
  75                 e[this.defaultEventAction]();
  76             }
  77         }
  78     },
  79
  80     // private
  81     doRelay : function(e, h, hname){
  82         return h.call(this.scope || this, e);
  83     },
  84
  85     // possible handlers
  86     enter : false,
  87     left : false,
  88     right : false,
  89     up : false,
  90     down : false,
  91     tab : false,
  92     esc : false,
  93     pageUp : false,
  94     pageDown : false,
  95     del : false,
  96     home : false,
  97     end : false,
  98
  99     // quick lookup hash
 100     keyToHandler : {
 101         37 : "left",
 102         39 : "right",
 103         38 : "up",
 104         40 : "down",
 105         33 : "pageUp",
 106         34 : "pageDown",
 107         46 : "del",
 108         36 : "home",
 109         35 : "end",
 110         13 : "enter",
 111         27 : "esc",
 112         9  : "tab"
 113     },
 114
 115     stopKeyUp: function(e) {
 116         var k = e.getKey();
 117
 118         if (k >= 37 && k <= 40) {
 119             // *** bugfix - safari 2.x fires 2 keyup events on cursor keys
 120             // *** (note: this bugfix sacrifices the "keyup" event originating from keyNav elements in Safari 2)
 121             e.stopEvent();
 122         }
 123     },
 124
 125         <div id="method-Ext.KeyNav-enable"></div>/**
 126          * Enable this KeyNav
 127          */
 128         enable: function() {
 129         if (this.disabled) {
 130             if (Ext.isSafari2) {
 131                 // call stopKeyUp() on "keyup" event
 132                 this.el.on('keyup', this.stopKeyUp, this);
 133             }
 134
 135             this.el.on(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
 136             this.disabled = false;
 137         }
 138     },
 139
 140         <div id="method-Ext.KeyNav-disable"></div>/**
 141          * Disable this KeyNav
 142          */
 143         disable: function() {
 144         if (!this.disabled) {
 145             if (Ext.isSafari2) {
 146                 // remove "keyup" event handler
 147                 this.el.un('keyup', this.stopKeyUp, this);
 148             }
 149
 150             this.el.un(this.isKeydown()? 'keydown' : 'keypress', this.relay, this);
 151             this.disabled = true;
 152         }
 153     },
 154
 155     <div id="method-Ext.KeyNav-setDisabled"></div>/**
 156      * Convenience function for setting disabled/enabled by boolean.
 157      * @param {Boolean} disabled
 158      */
 159     setDisabled : function(disabled){
 160         this[disabled ? "disable" : "enable"]();
 161     },
 162
 163     // private
 164     isKeydown: function(){
 165         return this.forceKeyDown || Ext.EventManager.useKeydown;
 166     }
 167 };
 168 </pre>
 169 </body>
 170 </html>