Ext.KeyNav.html
7.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<div class="body-wrap">
<div class="top-tools">
<a class="inner-link" href="#Ext.KeyNav-props"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-prop">Properties</a>
<a class="inner-link" href="#Ext.KeyNav-methods"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-method">Methods</a>
<a class="inner-link" href="#Ext.KeyNav-events"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-event">Events</a>
<a class="inner-link" href="#Ext.KeyNav-configs"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-config">Config Options</a>
<a class="bookmark" href="../docs/?class=Ext.KeyNav"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-fav">Direct Link</a>
</div>
<h1>Class Ext.KeyNav</h1>
<table cellspacing="0">
<tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
<tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/util/KeyNav_wev8.js" target="_blank">KeyNav_wev8.js</a></td></tr>
<tr><td class="label">Class:</td><td class="hd-info">KeyNav</td></tr>
<tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
</table>
<div class="description">
<p>Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind
navigation keys to function calls that will get called when the keys are pressed, providing an easy
way to implement custom navigation schemes for any UI component.</p>
<p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
pageUp, pageDown, del, home, end. Usage:</p>
<pre><code>var nav = <b>new</b> Ext.KeyNav(<em>"my-element"</em>, {
<em>"left"</em> : <b>function</b>(e){
<b>this</b>.moveLeft(e.ctrlKey);
},
<em>"right"</em> : <b>function</b>(e){
<b>this</b>.moveRight(e.ctrlKey);
},
<em>"enter"</em> : <b>function</b>(e){
<b>this</b>.save();
},
scope : <b>this</b>
});</code></pre> </div>
<div class="hr"></div>
<a id="Ext.KeyNav-configs"></a>
<h2>Config Options</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Config Options</th>
<th class="msource-header">Defined By</th>
</tr>
<tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-defaultEventAction"></a>
<b>defaultEventAction</b> : String <div class="mdesc">
<div class="short">The method to call on the Ext.EventObject after this KeyNav intercepts a key. Valid values are Ext.EventObject.stopEv...</div>
<div class="long">
The method to call on the <a ext:cls="Ext.EventObject" href="output/Ext.EventObject.html">Ext.EventObject</a> after this KeyNav intercepts a key. Valid values are <a ext:cls="Ext.EventObject" ext:member="stopEvent" href="output/Ext.EventObject.html#stopEvent">Ext.EventObject.stopEvent</a>, <a ext:cls="Ext.EventObject" ext:member="preventDefault" href="output/Ext.EventObject.html#preventDefault">Ext.EventObject.preventDefault</a> and <a ext:cls="Ext.EventObject" ext:member="stopPropagation" href="output/Ext.EventObject.html#stopPropagation">Ext.EventObject.stopPropagation</a> (defaults to 'stopEvent') </div>
</div>
</td>
<td class="msource">KeyNav</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-disabled"></a>
<b>disabled</b> : Boolean <div class="mdesc">
True to disable this KeyNav instance (defaults to false) </div>
</td>
<td class="msource">KeyNav</td>
</tr>
<tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-forceKeyDown"></a>
<b>forceKeyDown</b> : Boolean <div class="mdesc">
<div class="short">Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since IE does...</div>
<div class="long">
Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since IE does not propagate special keys on keypress, but setting this to true will force other browsers to also handle keydown instead of keypress. </div>
</div>
</td>
<td class="msource">KeyNav</td>
</tr>
</table>
<a id="Ext.KeyNav-props"></a>
<h2>Public Properties</h2>
<div class="no-members">This class has no public properties.</div> <a id="Ext.KeyNav-methods"></a>
<h2>Public Methods</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Method</th>
<th class="msource-header">Defined By</th>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-KeyNav"></a>
<b>KeyNav</b>( <code>Mixed el</code>, <code>Object config</code> ) <div class="mdesc">
<div class="short"></div>
<div class="long">
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The element to bind to</div></li><li><code>config</code> : Object<div class="sub-desc">The config</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code></code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">KeyNav</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-disable"></a>
<b>disable</b>() : void <div class="mdesc">
<div class="short">Disable this KeyNav</div>
<div class="long">
Disable this KeyNav <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">KeyNav</td>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.KeyNav-enable"></a>
<b>enable</b>() : void <div class="mdesc">
<div class="short">Enable this KeyNav</div>
<div class="long">
Enable this KeyNav <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">KeyNav</td>
</tr>
</table>
<a id="Ext.KeyNav-events"></a>
<h2>Public Events</h2>
<div class="no-members">This class has no public events.</div>
</div>