docs/source/KeyNav2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-util.KeyNav-method-constructor'><span id='Ext-util.KeyNav'>/**
   2 </span></span> * @class Ext.util.KeyNav
   3  * &lt;p&gt;Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
   4  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
   5  * way to implement custom navigation schemes for any UI component.&lt;/p&gt;
   6  * &lt;p&gt;The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc,
   7  * pageUp, pageDown, del, backspace, home, end.  Usage:&lt;/p&gt;
   8  &lt;pre&gt;&lt;code&gt;
   9 var nav = new Ext.util.KeyNav(&quot;my-element&quot;, {
  10     &quot;left&quot; : function(e){
  11         this.moveLeft(e.ctrlKey);
  12     },
  13     &quot;right&quot; : function(e){
  14         this.moveRight(e.ctrlKey);
  15     },
  16     &quot;enter&quot; : function(e){
  17         this.save();
  18     },
  19     scope : this
  20 });
  21 &lt;/code&gt;&lt;/pre&gt;
  22  * @constructor
  23  * @param {Mixed} el The element to bind to
  24  * @param {Object} config The config
  25  */
  26 Ext.define('Ext.util.KeyNav', {
  27
  28     alternateClassName: 'Ext.KeyNav',
  29
  30     requires: ['Ext.util.KeyMap'],
  31
  32     statics: {
  33         keyOptions: {
  34             left: 37,
  35             right: 39,
  36             up: 38,
  37             down: 40,
  38             space: 32,
  39             pageUp: 33,
  40             pageDown: 34,
  41             del: 46,
  42             backspace: 8,
  43             home: 36,
  44             end: 35,
  45             enter: 13,
  46             esc: 27,
  47             tab: 9
  48         }
  49     },
  50
  51     constructor: function(el, config){
  52         this.setConfig(el, config || {});
  53     },
  54
  55 <span id='Ext-util.KeyNav-method-setConfig'>    /**
  56 </span>     * Sets up a configuration for the KeyNav.
  57      * @private
  58      * @param {Mixed} el The element to bind to
  59      * @param {Object}A configuration object as specified in the constructor.
  60      */
  61     setConfig: function(el, config) {
  62         if (this.map) {
  63             this.map.destroy();
  64         }
  65
  66         var map = Ext.create('Ext.util.KeyMap', el, null, this.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : this.forceKeyDown)),
  67             keys = Ext.util.KeyNav.keyOptions,
  68             scope = config.scope || this,
  69             key;
  70
  71         this.map = map;
  72         for (key in keys) {
  73             if (keys.hasOwnProperty(key)) {
  74                 if (config[key]) {
  75                     map.addBinding({
  76                         scope: scope,
  77                         key: keys[key],
  78                         handler: Ext.Function.bind(this.handleEvent, scope, [config[key]], true),
  79                         defaultEventAction: config.defaultEventAction || this.defaultEventAction
  80                     });
  81                 }
  82             }
  83         }
  84
  85         map.disable();
  86         if (!config.disabled) {
  87             map.enable();
  88         }
  89     },
  90
  91 <span id='Ext-util.KeyNav-method-handleEvent'>    /**
  92 </span>     * Method for filtering out the map argument
  93      * @private
  94      * @param {Ext.util.KeyMap} map
  95      * @param {Ext.EventObject} event
  96      * @param {Object} options Contains the handler to call
  97      */
  98     handleEvent: function(map, event, handler){
  99         return handler.call(this, event);
 100     },
 101
 102 <span id='Ext-util.KeyNav-cfg-disabled'>    /**
 103 </span>     * @cfg {Boolean} disabled
 104      * True to disable this KeyNav instance (defaults to false)
 105      */
 106     disabled: false,
 107
 108 <span id='Ext-util.KeyNav-cfg-defaultEventAction'>    /**
 109 </span>     * @cfg {String} defaultEventAction
 110      * The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key.  Valid values are
 111      * {@link Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and
 112      * {@link Ext.EventObject#stopPropagation} (defaults to 'stopEvent')
 113      */
 114     defaultEventAction: &quot;stopEvent&quot;,
 115
 116 <span id='Ext-util.KeyNav-cfg-forceKeyDown'>    /**
 117 </span>     * @cfg {Boolean} forceKeyDown
 118      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
 119      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
 120      * handle keydown instead of keypress.
 121      */
 122     forceKeyDown: false,
 123
 124 <span id='Ext-util.KeyNav-method-destroy'>    /**
 125 </span>     * Destroy this KeyNav (this is the same as calling disable).
 126      * @param {Boolean} removeEl True to remove the element associated with this KeyNav.
 127      */
 128     destroy: function(removeEl){
 129         this.map.destroy(removeEl);
 130         delete this.map;
 131     },
 132
 133 <span id='Ext-util.KeyNav-method-enable'>    /**
 134 </span>     * Enable this KeyNav
 135      */
 136     enable: function() {
 137         this.map.enable();
 138         this.disabled = false;
 139     },
 140
 141 <span id='Ext-util.KeyNav-method-disable'>    /**
 142 </span>     * Disable this KeyNav
 143      */
 144     disable: function() {
 145         this.map.disable();
 146         this.disabled = true;
 147     },
 148
 149 <span id='Ext-util.KeyNav-method-setDisabled'>    /**
 150 </span>     * Convenience function for setting disabled/enabled by boolean.
 151      * @param {Boolean} disabled
 152      */
 153     setDisabled : function(disabled){
 154         this.map.setDisabled(disabled);
 155         this.disabled = disabled;
 156     },
 157
 158 <span id='Ext-util.KeyNav-method-getKeyEvent'>    /**
 159 </span>     * Determines the event to bind to listen for keys. Depends on the {@link #forceKeyDown} setting,
 160      * as well as the useKeyDown option on the EventManager.
 161      * @return {String} The type of event to listen for.
 162      */
 163     getKeyEvent: function(forceKeyDown){
 164         return (forceKeyDown || Ext.EventManager.useKeyDown) ? 'keydown' : 'keypress';
 165     }
 166 });
 167 </pre></pre></body></html>