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

最新推荐文章于 2021-05-30 23:24:57 发布

weixin_30364147

最新推荐文章于 2021-05-30 23:24:57 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/javaTest/archive/2010/10/14/2589394.html

版权

这里扩展了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>

转载于:https://www.cnblogs.com/javaTest/archive/2010/10/14/2589394.html