日期:2014-05-16 浏览次数:20359 次
? ? 用extjs做项目大部分都会用到一个组件combobox去实现联想框的功能,如果实现这个功能肯定是要用到事件机制的keyup
extjs为我们提供的keyup的事件,但是前提是要开启enableKeyEvents:true,打开键盘事件
?? 非常奇怪的现象出现了,在监听其中测试事件,keyup始终就是没法fire ,同样的配置下去测试keydown,keypress都可以正确的fire ,没法获得keyup的事件就没有办法及时的获取文本框 的内容,这样的话如何实现联想框,这个问题困扰了我整整一天太悲剧了,最后在看一个国外网友的一段代码修改的extjs的keyup的bug
Ext.override(Ext.form.ComboBox, { initEvents : function(){ Ext.form.ComboBox.superclass.initEvents.call(this); this.keyNav = new Ext.KeyNav(this.el, { "up" : function(e){ this.inKeyMode = true; this.selectPrev(); }, "down" : function(e){ if(!this.isExpanded()){ this.onTriggerClick(); }else{ this.inKeyMode = true; this.selectNext(); } }, "enter" : function(e){ this.onViewClick(); this.delayedCheck = true; this.unsetDelayCheck.defer(10, this); }, "esc" : function(e){ this.collapse(); }, "tab" : function(e){ this.onViewClick(false); return true; }, scope : this, doRelay : function(foo, bar, hname){ if(hname == 'down' || this.scope.isExpanded()){ return Ext.KeyNav.prototype.doRelay.apply(this, arguments); } return true; }, forceKeyDown : true }); this.queryDelay = Math.max(this.queryDelay || 10, this.mode == 'local' ? 10 : 250); this.dqTask = new Ext.util.DelayedTask(this.initQuery, this); if(this.typeAhead){ this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this); } if((this.editable !== false) && !this.enableKeyEvents) { this.el.on("keyup", this.onKeyUp, this); } if(this.forceSelection){ this.on('blur', this.doForce, this); } }, onKeyUp : function(e){ if(this.editable !== false && !e.isSpecialKey()){ this.lastKey = e.getKey(); this.dqTask.delay(this.queryDelay); } Ext.form.ComboBox.superclass.onKeyUp.call(this, e); } });
? ?? 没想到keyup还真的实现了
最终的联想效果如下图
顺便说一下,我用的是2.2版本的不知道3以上的版本keyup是不是有同样的问题
?