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>