Ext 中，為Ext.form.HtmlEditor添加鍵盤事件 · ExtJS 專欄

這里擴展了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> ~~~