KeyNav.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

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