123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- /*
- * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
- *
- * http://extjs.com/license
- */
- /**
- * @class Ext.KeyNav
- * <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 = 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
- * });
- * </code></pre>
- *
- * @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
- prepareEvent : function(e) {
- var k = e.getKey();
- var h = this.keyToHandler[k];
- // if(h && this[h]){
- // e.stopPropagation();
- // }
- if (Ext.isSafari && h && k >= 37 && k <= 40) {
- e.stopEvent();
- }
- },
- // 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"
- },
- /**
- * Enable this KeyNav
- */
- enable : function() {
- if (this.disabled) {
- // ie won't do special keys on keypress, no one else will repeat
- // keys with keydown
- // the EventObject will normalize Safari automatically
- if (this.forceKeyDown || Ext.isIE || Ext.isAir) {
- this.el.on("keydown", this.relay, this);
- } else {
- this.el.on("keydown", this.prepareEvent, this);
- this.el.on("keypress", this.relay, this);
- }
- this.disabled = false;
- }
- },
- /**
- * Disable this KeyNav
- */
- disable : function() {
- if (!this.disabled) {
- if (this.forceKeyDown || Ext.isIE || Ext.isAir) {
- this.el.un("keydown", this.relay);
- } else {
- this.el.un("keydown", this.prepareEvent);
- this.el.un("keypress", this.relay);
- }
- this.disabled = true;
- }
- }
- };
|