/*! * Ext JS Library 3.2.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ /** * @class Ext.KeyNav *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, left, right, up, down, tab, esc, * pageUp, pageDown, del, home, end. Usage:
* @constructor * @param {Mixed} el The element to bind to * @param {Object} config The config */ Ext.KeyNav = function(el, config){ this.el = Ext.get(el); Ext.apply(this, config); if(!this.disabled){ this.disabled = true; this.enable(); } }; Ext.KeyNav.prototype = { /** * @cfg {Boolean} disabled * True to disable this KeyNav instance (defaults to false) */ disabled : false, /** * @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} (defaults to 'stopEvent') */ defaultEventAction: "stopEvent", /** * @cfg {Boolean} forceKeyDown * 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. */ forceKeyDown : false, // private relay : function(e){ var k = e.getKey(); var h = this.keyToHandler[k]; if(h && this[h]){ if(this.doRelay(e, this[h], h) !== true){ e[this.defaultEventAction](); } } }, // private doRelay : function(e, h, hname){ return h.call(this.scope || this, e); }, // possible handlers enter : false, left : false, right : false, up : false, down : false, tab : false, esc : false, pageUp : false, pageDown : false, del : false, home : false, end : false, // quick lookup hash keyToHandler : { 37 : "left", 39 : "right", 38 : "up", 40 : "down", 33 : "pageUp", 34 : "pageDown", 46 : "del", 36 : "home", 35 : "end", 13 : "enter", 27 : "esc", 9 : "tab" }, stopKeyUp: function(e) { var k = e.getKey(); if (k >= 37 && k <= 40) { // *** bugfix - safari 2.x fires 2 keyup events on cursor keys // *** (note: this bugfix sacrifices the "keyup" event originating from keyNav elements in Safari 2) e.stopEvent(); } }, /** * Destroy this KeyNav (this is the same as calling disable). */ destroy: function(){ this.disable(); }, /** * Enable this KeyNav */ enable: function() { if (this.disabled) { if (Ext.isSafari2) { // call stopKeyUp() on "keyup" event this.el.on('keyup', this.stopKeyUp, this); } this.el.on(this.isKeydown()? 'keydown' : 'keypress', this.relay, this); this.disabled = false; } }, /** * Disable this KeyNav */ disable: function() { if (!this.disabled) { if (Ext.isSafari2) { // remove "keyup" event handler this.el.un('keyup', this.stopKeyUp, this); } this.el.un(this.isKeydown()? 'keydown' : 'keypress', this.relay, this); this.disabled = true; } }, /** * Convenience function for setting disabled/enabled by boolean. * @param {Boolean} disabled */ setDisabled : function(disabled){ this[disabled ? "disable" : "enable"](); }, // private isKeydown: function(){ return this.forceKeyDown || Ext.EventManager.useKeydown; } };var nav = new Ext.KeyNav("my-element", { "left" : function(e){ this.moveLeft(e.ctrlKey); }, "right" : function(e){ this.moveRight(e.ctrlKey); }, "enter" : function(e){ this.save(); }, scope : this });