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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-method-constructor'><span id='Ext-util-KeyNav'>/**
  19 </span></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  * @constructor
  40  * @param {Mixed} el The element to bind to
  41  * @param {Object} config The config
  42  */
  43 Ext.define('Ext.util.KeyNav', {
  44
  45     alternateClassName: 'Ext.KeyNav',
  46
  47     requires: ['Ext.util.KeyMap'],
  48
  49     statics: {
  50         keyOptions: {
  51             left: 37,
  52             right: 39,
  53             up: 38,
  54             down: 40,
  55             space: 32,
  56             pageUp: 33,
  57             pageDown: 34,
  58             del: 46,
  59             backspace: 8,
  60             home: 36,
  61             end: 35,
  62             enter: 13,
  63             esc: 27,
  64             tab: 9
  65         }
  66     },
  67
  68     constructor: function(el, config){
  69         this.setConfig(el, config || {});
  70     },
  71
  72 <span id='Ext-util-KeyNav-method-setConfig'>    /**
  73 </span>     * Sets up a configuration for the KeyNav.
  74      * @private
  75      * @param {Mixed} el The element to bind to
  76      * @param {Object}A configuration object as specified in the constructor.
  77      */
  78     setConfig: function(el, config) {
  79         if (this.map) {
  80             this.map.destroy();
  81         }
  82
  83         var map = Ext.create('Ext.util.KeyMap', el, null, this.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : this.forceKeyDown)),
  84             keys = Ext.util.KeyNav.keyOptions,
  85             scope = config.scope || this,
  86             key;
  87
  88         this.map = map;
  89         for (key in keys) {
  90             if (keys.hasOwnProperty(key)) {
  91                 if (config[key]) {
  92                     map.addBinding({
  93                         scope: scope,
  94                         key: keys[key],
  95                         handler: Ext.Function.bind(this.handleEvent, scope, [config[key]], true),
  96                         defaultEventAction: config.defaultEventAction || this.defaultEventAction
  97                     });
  98                 }
  99             }
 100         }
 101
 102         map.disable();
 103         if (!config.disabled) {
 104             map.enable();
 105         }
 106     },
 107
 108 <span id='Ext-util-KeyNav-method-handleEvent'>    /**
 109 </span>     * Method for filtering out the map argument
 110      * @private
 111      * @param {Ext.util.KeyMap} map
 112      * @param {Ext.EventObject} event
 113      * @param {Object} options Contains the handler to call
 114      */
 115     handleEvent: function(map, event, handler){
 116         return handler.call(this, event);
 117     },
 118
 119 <span id='Ext-util-KeyNav-cfg-disabled'>    /**
 120 </span>     * @cfg {Boolean} disabled
 121      * True to disable this KeyNav instance (defaults to false)
 122      */
 123     disabled: false,
 124
 125 <span id='Ext-util-KeyNav-cfg-defaultEventAction'>    /**
 126 </span>     * @cfg {String} defaultEventAction
 127      * The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key.  Valid values are
 128      * {@link Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and
 129      * {@link Ext.EventObject#stopPropagation} (defaults to 'stopEvent')
 130      */
 131     defaultEventAction: &quot;stopEvent&quot;,
 132
 133 <span id='Ext-util-KeyNav-cfg-forceKeyDown'>    /**
 134 </span>     * @cfg {Boolean} forceKeyDown
 135      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
 136      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
 137      * handle keydown instead of keypress.
 138      */
 139     forceKeyDown: false,
 140
 141 <span id='Ext-util-KeyNav-method-destroy'>    /**
 142 </span>     * Destroy this KeyNav (this is the same as calling disable).
 143      * @param {Boolean} removeEl True to remove the element associated with this KeyNav.
 144      */
 145     destroy: function(removeEl){
 146         this.map.destroy(removeEl);
 147         delete this.map;
 148     },
 149
 150 <span id='Ext-util-KeyNav-method-enable'>    /**
 151 </span>     * Enable this KeyNav
 152      */
 153     enable: function() {
 154         this.map.enable();
 155         this.disabled = false;
 156     },
 157
 158 <span id='Ext-util-KeyNav-method-disable'>    /**
 159 </span>     * Disable this KeyNav
 160      */
 161     disable: function() {
 162         this.map.disable();
 163         this.disabled = true;
 164     },
 165
 166 <span id='Ext-util-KeyNav-method-setDisabled'>    /**
 167 </span>     * Convenience function for setting disabled/enabled by boolean.
 168      * @param {Boolean} disabled
 169      */
 170     setDisabled : function(disabled){
 171         this.map.setDisabled(disabled);
 172         this.disabled = disabled;
 173     },
 174
 175 <span id='Ext-util-KeyNav-method-getKeyEvent'>    /**
 176 </span>     * Determines the event to bind to listen for keys. Depends on the {@link #forceKeyDown} setting,
 177      * as well as the useKeyDown option on the EventManager.
 178      * @return {String} The type of event to listen for.
 179      */
 180     getKeyEvent: function(forceKeyDown){
 181         return (forceKeyDown || Ext.EventManager.useKeyDown) ? 'keydown' : 'keypress';
 182     }
 183 });
 184 </pre>
 185 </body>
 186 </html>