Ext 中，为Ext.form.HtmlEditor添加键盘事件

来源：互联网发布：爵迹知乎编辑：程序博客网时间：2024/05/19 10:08

这里扩展了Ext.form.HtmlEditor组件，为其添加了keyup，keydown，keypress事件监听。重写了Ext.form.HtmlEditor的方法：

initEditor、initComponent；

重写后的Ext.form.HtmlEditor示例：

/*** * 重写Ext.form.HtmlEditor，为其添加键盘事件 * author: hoojo * email: hoojo_@126.com * blog: http://blog.csdn.net/IBM_hoojo * create by: 2010-8-14 * ext-lib: 3.2.1 * version: 1.0 */Ext.override(Ext.form.HtmlEditor, {initEditor : function(){ var dbody = this.getEditorBody(); var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat'); ss['background-attachment'] = 'fixed'; // w3c ss['background-color'] = 'white'; dbody.bgProperties = 'fixed'; // ie Ext.DomHelper.applyStyles(dbody, ss); if(this.doc){ try{ Ext.EventManager.removeAll(this.doc); }catch(e){} } this.doc = this.getDoc(); Ext.EventManager.on(this.doc, { 'mousedown': this.onEditorEvent, 'dblclick': this.onEditorEvent, 'click': this.onEditorEvent, 'keyup': this.onEditorKeyUpEvent, 'keydown': this.onEditorKeyDownEvent, 'keypress': this.onEditorKeyPressEvent, buffer:100, scope: this }); if(Ext.isGecko){ Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this); } if(Ext.isIE || Ext.isSafari || Ext.isOpera){ Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this); } this.initialized = true; this.fireEvent('initialize', this); this.doc.editorInitialized = true; this.pushValue(); },initComponent: function () {this.addEvents( 'initialize', 'activate', 'beforesync', 'beforepush', 'sync', 'push', 'editmodechange', 'keydown', 'keyup', 'keypress' );},onEditorKeyPressEvent : function(e){ this.updateToolbar(); this.fireEvent("keypress", this, e); }, onEditorKeyUpEvent : function(e){ this.updateToolbar(); this.fireEvent("keyup", this, e); }, onEditorKeyDownEvent : function(e){ this.updateToolbar(); this.fireEvent("keydown", this, e); }});/** * 重写后的Ext.form.HtmlEditor有了键盘的keyPress事件了 */Ext.ns("Ext.hoo.editor");Ext.hoo.editor.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {constructor: function () {Ext.hoo.editor.HTMLEditor.superclass.constructor.call(this, { renderTo: Ext.getBody(), fieldLabel:'Biography', height:200,listeners: {"keydown": function (editor, e) {alert("keydown:" + editor.getValue());},"keyup": function (editor, e) {alert("keyup:" + editor.getValue());},"keypress": function (editor, e) {alert("keypress:" + editor.getValue());}}});}});

注意：要添加键盘事件请添加Ext.override里的那段代码。这段是扩展代码，目的是为HtmlEditor添加键盘事件的。

html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Ext 示例</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.2.1/ext-all.js"></script><script type="text/javascript" src="HtmlEditor.js"></script><script type="text/javascript">Ext.onReady(function(){new Ext.hoo.editor.HTMLEditor(); });</script> </head> <body> </body></html>