ExtJs 2.1 中的HtmlEditor的disabled和readOnly

最新推荐文章于 2024-03-29 10:08:47 发布

原创最新推荐文章于 2024-03-29 10:08:47 发布 · 6.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #stylesheet #javascript #scroll #html

HTML/JS/CSS 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了ExtJs 2.1版本中HtmlEditor控件的disabled及readOnly属性无法正常工作的问题，并提供了通过重写onDisable及onEnable方法来解决该问题的具体方案。

Ext Js 2.1 的HtmlEditor控件的disabled、readOnly属性，以及disable(),enable()方法，达不到期望的效果。

设置disabled : true，之后，点击编辑框，还是能输入。

disabled、readOnly属性，只是控制能否直接编辑html源码。

<html> <head> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <mce:script type="text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext-all.js" mce_src="ext-all.js"></mce:script> <title>Ext HtmlEditor</title> </head> <mce:script language="javascript"></mce:script> <body> <div id='announceDiv'></div> </body> </html>

Ext Js网站有人提供了解决方法：

http://extjs.com/forum/showthread.php?t=26657

重写onDisable，onEnable方法。

Ext.override(Ext.form.HtmlEditor, { onDisable: function(){ if(this.rendered){ this.wrap.mask(); } Ext.form.HtmlEditor.superclass.onDisable.call(this); }, onEnable: function(){ if(this.rendered){ this.wrap.unmask(); } Ext.form.HtmlEditor.superclass.onEnable.call(this); } });

默认的mask的效果有点暗，可以稍作修改。

onDisable: function(){ if(this.rendered){ var roMask = this.wrap.mask(); roMask.dom.style.filter = "alpha(opacity=0);"; //IE roMask.dom.style.opacity = "0"; //Mozilla roMask.dom.style.background = "white"; roMask.dom.style.overflow = "scroll"; //roMask.dom.innerHTML = this.getValue(); } Ext.form.HtmlEditor.superclass.onDisable.call(this); },

最后说下，csdn这个编辑器很不爽。