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

这里扩展了Ext.form.HtmlEditor组件,为其添加了keyup,keydown,keypress事件监听。重写了Ext.form.HtmlEditor的方法:

initEditor、initComponent;

 

重写后的Ext.form.HtmlEditor示例:

 

[javascript]  view plain copy print ?
  1. /*** 
  2.  * 重写Ext.form.HtmlEditor,为其添加键盘事件 
  3.  * author: hoojo 
  4.  * email: [email protected] 
  5.  * blog: http://blog.csdn.net/IBM_hoojo 
  6.  * create by: 2010-8-14 
  7.  * ext-lib: 3.2.1 
  8.  * version: 1.0 
  9.  */  
  10. Ext.override(Ext.form.HtmlEditor, {  
  11.     initEditor : function(){  
  12.         var dbody = this.getEditorBody();  
  13.         var ss = this.el.getStyles('font-size''font-family''background-image''background-repeat');  
  14.         ss['background-attachment'] = 'fixed'// w3c  
  15.         ss['background-color'] = 'white';  
  16.         dbody.bgProperties = 'fixed'// ie  
  17.         Ext.DomHelper.applyStyles(dbody, ss);  
  18.         if(this.doc){  
  19.             try{  
  20.                 Ext.EventManager.removeAll(this.doc);  
  21.             }catch(e){}  
  22.         }  
  23.         this.doc = this.getDoc();  
  24.         Ext.EventManager.on(this.doc, {  
  25.             'mousedown'this.onEditorEvent,  
  26.             'dblclick'this.onEditorEvent,  
  27.             'click'this.onEditorEvent,  
  28.             'keyup'this.onEditorKeyUpEvent,  
  29.             'keydown'this.onEditorKeyDownEvent,  
  30.             'keypress'this.onEditorKeyPressEvent,  
  31.             buffer:100,  
  32.             scope: this  
  33.         });  
  34.         if(Ext.isGecko){  
  35.             Ext.EventManager.on(this.doc, 'keypress'this.applyCommand, this);  
  36.         }  
  37.         if(Ext.isIE || Ext.isSafari || Ext.isOpera){  
  38.             Ext.EventManager.on(this.doc, 'keydown'this.fixKeys, this);  
  39.         }  
  40.         this.initialized = true;  
  41.         this.fireEvent('initialize'this);  
  42.         this.doc.editorInitialized = true;  
  43.         this.pushValue();  
  44.     },  
  45.     initComponent: function () {  
  46.         this.addEvents(  
  47.             'initialize',  
  48.             'activate',  
  49.             'beforesync',  
  50.             'beforepush',  
  51.             'sync',  
  52.             'push',  
  53.             'editmodechange',  
  54.             'keydown',  
  55.             'keyup',  
  56.             'keypress'  
  57.         );  
  58.     },  
  59.     onEditorKeyPressEvent : function(e){  
  60.         this.updateToolbar();  
  61.         this.fireEvent("keypress"this, e);  
  62.     },  
  63.     onEditorKeyUpEvent : function(e){  
  64.         this.updateToolbar();  
  65.         this.fireEvent("keyup"this, e);  
  66.     },  
  67.     onEditorKeyDownEvent : function(e){  
  68.         this.updateToolbar();  
  69.         this.fireEvent("keydown"this, e);  
  70.     }  
  71. });  
  72.   
  73. /** 
  74.  * 重写后的Ext.form.HtmlEditor有了键盘的keyPress事件了 
  75.  */  
  76. Ext.ns("Ext.hoo.editor");  
  77. Ext.hoo.editor.HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {  
  78.     constructor: function () {  
  79.         Ext.hoo.editor.HTMLEditor.superclass.constructor.call(this, {  
  80.             renderTo: Ext.getBody(),   
  81.             fieldLabel:'Biography',  
  82.             height:200,  
  83.             listeners: {  
  84.                 "keydown"function (editor, e) {  
  85.                     alert("keydown:" + editor.getValue());  
  86.                 },  
  87.                 "keyup"function (editor, e) {  
  88.                     alert("keyup:" + editor.getValue());  
  89.                 },  
  90.                 "keypress"function (editor, e) {  
  91.                     alert("keypress:" + editor.getValue());  
  92.                 }  
  93.             }  
  94.         });  
  95.     }  
  96. });  

 注意:要添加键盘事件请添加Ext.override里的那段代码。这段是扩展代码,目的是为HtmlEditor添加键盘事件的。

 

html页面

[xhtml]  view plain copy print ?
  1. >  
  2. <html>  
  3.   <head>  
  4.     <title>Ext 示例title>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=gbk">  
  9.     <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />  
  10.     <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js">script>  
  11.     <script type="text/javascript" src="ext-3.2.1/ext-all.js">script>  
  12.     <script type="text/javascript" src="HtmlEditor.js">script>  
  13.     <script type="text/javascript">  
  14.         Ext.onReady(function(){  
  15.             new Ext.hoo.editor.HTMLEditor();  
  16.      });  
  17.     script>  
  18.   head>  
  19.     
  20.   <body>  

你可能感兴趣的:(【extjs】)