docs/source/KeyNav2.html

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