这里扩展了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>
~~~
- 前言
- ExtJS 中用js 操作cookie的方法
- eclipse MyEclipse中安装 ext插件 spket提示
- eclipse MyEclipse中安装 spket插件 js文件内容字体变小解决方案
- ExtJS中，在FireFox浏览器中字体很小，解决方法
- ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- ExtJS EditorGridPanel 示例之xml格式Store前后台增删改查
- ExtJS EditorGridPanel 示例之Array格式（自定义Array解析器）Store前后台增删改查
- ExtJS EditorGridPanel 示例之Array格式Store前后台增删改查（不支持分页）
- ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查
- Ext 中，为Ext.form.HtmlEditor添加键盘事件
- ExtJS 文件浏览器，可以选择文件和文件夹
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS，完成CheckNodeColumnTree
- ExtJS Form扩展组件[ColorFiled, DateTimeFiled, IconCombo, MultiComboBox, DynamicTreeCombox]
- Ext [DDTabPanel、FoodImageField、ImageChooser]扩展组件