<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-util-KeyNav'>/**
</span> * 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.
*
* The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc,
* pageUp, pageDown, del, backspace, home, end.
*
* Usage:
*
* var nav = new Ext.util.KeyNav({
* target : "my-element",
* left : function(e){
* this.moveLeft(e.ctrlKey);
* },
* right : function(e){
* this.moveRight(e.ctrlKey);
* },
* enter : function(e){
* this.save();
* },
*
* // Binding may be a function specifiying fn, scope and defaultAction
* esc: {
* fn: this.onEsc,
* defaultEventAction: false
* },
* scope : this
* });
*/
Ext.define('Ext.util.KeyNav', {
alternateClassName: 'Ext.KeyNav',
requires: ['Ext.util.KeyMap'],
statics: {
keyOptions: {
left: 37,
right: 39,
up: 38,
down: 40,
space: 32,
pageUp: 33,
pageDown: 34,
del: 46,
backspace: 8,
home: 36,
end: 35,
enter: 13,
esc: 27,
tab: 9
}
},
constructor: function(config) {
var me = this;
if (arguments.length === 2) {
me.legacyConstructor.apply(me, arguments);
return;
}
me.setConfig(config);
},
<span id='Ext-util-KeyNav-method-legacyConstructor'> /**
</span> * @private
* Old constructor signature.
* @param {String/HTMLElement/Ext.Element} el The element or its ID to bind to
* @param {Object} config The config
*/
legacyConstructor: function(el, config) {
this.setConfig(Ext.apply({
target: el
}, config));
},
<span id='Ext-util-KeyNav-method-setConfig'> /**
</span> * Sets up a configuration for the KeyNav.
* @private
* @param {String/HTMLElement/Ext.Element} el The element or its ID to bind to
* @param {Object} config A configuration object as specified in the constructor.
*/
setConfig: function(config) {
var me = this,
keymapCfg = {
target: config.target,
ignoreInputFields: config.ignoreInputFields,
eventName: me.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : me.forceKeyDown, config.eventName)
},
map, keyCodes, defaultScope, keyName, binding;
if (me.map) {
me.map.destroy();
}
if (config.processEvent) {
keymapCfg.processEvent = config.processEvent;
keymapCfg.processEventScope = config.processEventScope||me;
}
map = me.map = new Ext.util.KeyMap(keymapCfg);
keyCodes = Ext.util.KeyNav.keyOptions;
defaultScope = config.scope || me;
for (keyName in keyCodes) {
if (keyCodes.hasOwnProperty(keyName)) {
// There is a property named after a key name.
// It may be a function or an binding spec containing handler, scope and defaultAction configs
if (binding = config[keyName]) {
if (typeof binding === 'function') {
binding = {
handler: binding,
defaultAction: (config.defaultEventAction !== undefined) ? config.defaultEventAction : me.defaultEventAction
};
}
map.addBinding({
key: keyCodes[keyName],
handler: Ext.Function.bind(me.handleEvent, binding.scope||defaultScope, binding.handler||binding.fn, true),
defaultEventAction: (binding.defaultEventAction !== undefined) ? binding.defaultAction : me.defaultEventAction
});
}
}
}
map.disable();
if (!config.disabled) {
map.enable();
}
},
<span id='Ext-util-KeyNav-method-handleEvent'> /**
</span> * Method for filtering out the map argument
* @private
* @param {Number} keyCode
* @param {Ext.EventObject} event
* @param {Object} options Contains the handler to call
*/
handleEvent: function(keyCode, event, handler){
return handler.call(this, event);
},
<span id='Ext-util-KeyNav-cfg-disabled'> /**
</span> * @cfg {Boolean} disabled
* True to disable this KeyNav instance.
*/
disabled: false,
<span id='Ext-util-KeyNav-cfg-defaultEventAction'> /**
</span> * @cfg {String} defaultEventAction
* The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key. Valid values are {@link
* Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and {@link Ext.EventObject#stopPropagation}.
*
* If a falsy value is specified, no method is called on the key event.
*/
defaultEventAction: "stopEvent",
<span id='Ext-util-KeyNav-cfg-forceKeyDown'> /**
</span> * @cfg {Boolean} forceKeyDown
* Handle the keydown event instead of keypress. 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.
*/
forceKeyDown: false,
<span id='Ext-util-KeyNav-cfg-target'> /**
</span> * @cfg {Ext.Component/Ext.Element/HTMLElement/String} target
* The object on which to listen for the event specified by the {@link #eventName} config option.
*/
<span id='Ext-util-KeyNav-cfg-eventName'> /**
</span> * @cfg {String} eventName
* The event to listen for to pick up key events.
*/
eventName: 'keypress',
<span id='Ext-util-KeyNav-cfg-processEvent'> /**
</span> * @cfg {Function} processEvent
* An optional event processor function which accepts the argument list provided by the {@link #eventName configured
* event} of the {@link #target}, and returns a keyEvent for processing by the KeyMap.
*
* This may be useful when the {@link #target} is a Component with s complex event signature. Extra information from
* the event arguments may be injected into the event for use by the handler functions before returning it.
*/
<span id='Ext-util-KeyNav-cfg-processEventScope'> /**
</span> * @cfg {Object} [processEventScope=this]
* The scope (`this` context) in which the {@link #processEvent} method is executed.
*/
<span id='Ext-util-KeyNav-cfg-ignoreInputFields'> /**
</span> * @cfg {Boolean} [ignoreInputFields=false]
* Configure this as `true` if there are any input fields within the {@link #target}, and this KeyNav
* should not process events from input fields, (`&lt;input>, &lt;textarea> and elements with `contentEditable="true"`)
*/
<span id='Ext-util-KeyNav-method-destroy'> /**
</span> * Destroy this KeyNav (this is the same as calling disable).
* @param {Boolean} removeEl True to remove the element associated with this KeyNav.
*/
destroy: function(removeEl) {
this.map.destroy(removeEl);
delete this.map;
},
<span id='Ext-util-KeyNav-method-enable'> /**
</span> * Enables this KeyNav.
*/
enable: function() {
this.map.enable();
this.disabled = false;
},
<span id='Ext-util-KeyNav-method-disable'> /**
</span> * Disables this KeyNav.
*/
disable: function() {
this.map.disable();
this.disabled = true;
},
<span id='Ext-util-KeyNav-method-setDisabled'> /**
</span> * Convenience function for setting disabled/enabled by boolean.
* @param {Boolean} disabled
*/
setDisabled : function(disabled) {
this.map.setDisabled(disabled);
this.disabled = disabled;
},
<span id='Ext-util-KeyNav-method-getKeyEvent'> /**
</span> * @private
* Determines the event to bind to listen for keys. Defaults to the {@link #eventName} value, but
* may be overridden the {@link #forceKeyDown} setting.
*
* The useKeyDown option on the EventManager modifies the default {@link #eventName} to be `keydown`,
* but a configured {@link #eventName} takes priority over this.
*
* @return {String} The type of event to listen for.
*/
getKeyEvent: function(forceKeyDown, configuredEventName) {
if (forceKeyDown || (Ext.EventManager.useKeyDown && !configuredEventName)) {
return 'keydown';
} else {
return configuredEventName||this.eventName;
}
}
});</pre>
</body>
</html>