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