docs/api/Ext.util.KeyNav.html

   1 <!DOCTYPE html><html><head><title>Ext.util.KeyNav | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.util.KeyNav',
  13         docClass: 'Ext.util.KeyNav',
  14         docReq: 'Ext.util.KeyNav',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'KeyNav2.html#Ext-util.KeyNav';
  33     clsInfo = {"methods":["KeyNav","destroy","disable","enable","getKeyEvent","setDisabled"],"cfgs":["defaultEventAction","disabled","forceKeyDown"],"properties":[],"events":[],"subclasses":["Ext.menu.KeyNav","Ext.view.BoundListKeyNav"]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/KeyNav2.html#Ext-util.KeyNav" target="_blank">Ext.util.KeyNav</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
  38 navigation keys to function calls that will get called when the keys are pressed, providing an easy
  39 way to implement custom navigation schemes for any UI component.</p>
  40
  41
  42 <p>The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc,
  43 pageUp, pageDown, del, backspace, home, end.  Usage:</p>
  44
  45
  46
  47
  48 <pre class="prettyprint"><code>var nav = new Ext.util.KeyNav("my-element", {
  49     "left" : function(e){
  50         this.moveLeft(e.ctrlKey);
  51     },
  52     "right" : function(e){
  53         this.moveRight(e.ctrlKey);
  54     },
  55     "enter" : function(e){
  56         this.save();
  57     },
  58     scope : this
  59 });
  60 </code></pre>
  61
  62 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-defaultEventAction" class="member f ni"><a href="Ext.util.KeyNav.html#config-defaultEventAction" rel="config-defaultEventAction" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-cfg-defaultEventAction" class="viewSource">view source</a></div><a name="defaultEventAction"></a><a name="config-defaultEventAction"></a><a href="Ext.util.KeyNav.html#" rel="config-defaultEventAction" class="cls expand">defaultEventAction</a><span> : String</span></div><div class="description"><div class="short">The method to call on the Ext.EventObject after this KeyNav intercepts a key.  Valid values are
  63 Ext.EventObject.stopE...</div><div class="long"><p>The method to call on the <a href="Ext.EventObject.html" rel="Ext.EventObject" class="docClass">Ext.EventObject</a> after this KeyNav intercepts a key.  Valid values are
  64 <a href="Ext.EventObject.html#stopEvent" rel="Ext.EventObject#stopEvent" class="docClass">Ext.EventObject.stopEvent</a>, <a href="Ext.EventObject.html#preventDefault" rel="Ext.EventObject#preventDefault" class="docClass">Ext.EventObject.preventDefault</a> and
  65 <a href="Ext.EventObject.html#stopPropagation" rel="Ext.EventObject#stopPropagation" class="docClass">Ext.EventObject.stopPropagation</a> (defaults to 'stopEvent')</p>
  66 </div></div></div><div id="config-disabled" class="member ni"><a href="Ext.util.KeyNav.html#config-disabled" rel="config-disabled" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-cfg-disabled" class="viewSource">view source</a></div><a name="disabled"></a><a name="config-disabled"></a><a href="Ext.util.KeyNav.html#" rel="config-disabled" class="cls expand">disabled</a><span> : Boolean</span></div><div class="description"><div class="short"><p>True to disable this KeyNav instance (defaults to false)</p>
  67 </div><div class="long"><p>True to disable this KeyNav instance (defaults to false)</p>
  68 </div></div></div><div id="config-forceKeyDown" class="member ni"><a href="Ext.util.KeyNav.html#config-forceKeyDown" rel="config-forceKeyDown" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-cfg-forceKeyDown" class="viewSource">view source</a></div><a name="forceKeyDown"></a><a name="config-forceKeyDown"></a><a href="Ext.util.KeyNav.html#" rel="config-forceKeyDown" class="cls expand">forceKeyDown</a><span> : Boolean</span></div><div class="description"><div class="short">Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
  69 IE doe...</div><div class="long"><p>Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
  70 IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
  71 handle keydown instead of keypress.</p>
  72 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-KeyNav" class="member f ni"><a href="Ext.util.KeyNav.html#method-KeyNav" rel="method-KeyNav" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-constructor" class="viewSource">view source</a></div><a name="KeyNav"></a><a name="method-KeyNav"></a><a href="Ext.util.KeyNav.html#" rel="method-KeyNav" class="cls expand">KeyNav</a>(
  73 <span class="pre">Mixed el, Object config</span>)
  74  : void</div><div class="description"><div class="short"><p>&nbsp;</p></div><div class="long">
  75 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The element to bind to</p>
  76 </div></li><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config</p>
  77 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
  78 </li></ul></div></div></div><div id="method-destroy" class="member ni"><a href="Ext.util.KeyNav.html#method-destroy" rel="method-destroy" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-destroy" class="viewSource">view source</a></div><a name="destroy"></a><a name="method-destroy"></a><a href="Ext.util.KeyNav.html#" rel="method-destroy" class="cls expand">destroy</a>(
  79 <span class="pre">Boolean removeEl</span>)
  80  : void</div><div class="description"><div class="short"><p>Destroy this KeyNav (this is the same as calling disable).</p>
  81 </div><div class="long"><p>Destroy this KeyNav (this is the same as calling disable).</p>
  82 <h3 class="pa">Parameters</h3><ul><li><span class="pre">removeEl</span> : Boolean<div class="sub-desc"><p>True to remove the element associated with this KeyNav.</p>
  83 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
  84 </li></ul></div></div></div><div id="method-disable" class="member ni"><a href="Ext.util.KeyNav.html#method-disable" rel="method-disable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-disable" class="viewSource">view source</a></div><a name="disable"></a><a name="method-disable"></a><a href="Ext.util.KeyNav.html#" rel="method-disable" class="cls expand">disable</a> : void</div><div class="description"><div class="short"><p>Disable this KeyNav</p>
  85 </div><div class="long"><p>Disable this KeyNav</p>
  86 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
  87 </li></ul></div></div></div><div id="method-enable" class="member ni"><a href="Ext.util.KeyNav.html#method-enable" rel="method-enable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-enable" class="viewSource">view source</a></div><a name="enable"></a><a name="method-enable"></a><a href="Ext.util.KeyNav.html#" rel="method-enable" class="cls expand">enable</a> : void</div><div class="description"><div class="short"><p>Enable this KeyNav</p>
  88 </div><div class="long"><p>Enable this KeyNav</p>
  89 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
  90 </li></ul></div></div></div><div id="method-getKeyEvent" class="member ni"><a href="Ext.util.KeyNav.html#method-getKeyEvent" rel="method-getKeyEvent" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-getKeyEvent" class="viewSource">view source</a></div><a name="getKeyEvent"></a><a name="method-getKeyEvent"></a><a href="Ext.util.KeyNav.html#" rel="method-getKeyEvent" class="cls expand">getKeyEvent</a>(
  91 <span class="pre">Object forceKeyDown</span>)
  92  : String</div><div class="description"><div class="short">Determines the event to bind to listen for keys. Depends on the forceKeyDown setting,
  93 as well as the useKeyDown optio...</div><div class="long"><p>Determines the event to bind to listen for keys. Depends on the <a href="Ext.util.KeyNav.html#forceKeyDown" rel="Ext.util.KeyNav#forceKeyDown" class="docClass">forceKeyDown</a> setting,
  94 as well as the useKeyDown option on the EventManager.</p>
  95 <h3 class="pa">Parameters</h3><ul><li><span class="pre">forceKeyDown</span> : Object<div class="sub-desc">
  96 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The type of event to listen for.</p>
  97 </li></ul></div></div></div><div id="method-setDisabled" class="member ni"><a href="Ext.util.KeyNav.html#method-setDisabled" rel="method-setDisabled" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.KeyNav.html" class="definedIn docClass">Ext.util.KeyNav</a><br/><a href="../source/KeyNav2.html#Ext-util.KeyNav-method-setDisabled" class="viewSource">view source</a></div><a name="setDisabled"></a><a name="method-setDisabled"></a><a href="Ext.util.KeyNav.html#" rel="method-setDisabled" class="cls expand">setDisabled</a>(
  98 <span class="pre">Boolean disabled</span>)
  99  : void</div><div class="description"><div class="short"><p>Convenience function for setting disabled/enabled by boolean.</p>
 100 </div><div class="long"><p>Convenience function for setting disabled/enabled by boolean.</p>
 101 <h3 class="pa">Parameters</h3><ul><li><span class="pre">disabled</span> : Boolean<div class="sub-desc">
 102 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 103 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>