如何禁止编辑htmleditor

如果我们想要使用HtmlEditor只是用于显示数据时，需要禁止编辑Ext.form.HtmlEditor。

一般的做法都是通过设置readOnly : true 和disabled : true 但是你会发现，这样的做法根本不起作用。

这里我们需要重写HtmlEditor的disabled方法。

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){

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"

}

Ext.form.HtmlEditor.superclass.onEnable.call(this)

}

})

方法一：设置readonly属性为true。

Html代码

1.<input type="text" value="readonly" readonly>

<input type="text" value="readonly" readonly>

方法二：设置disabled属性为true。

Html代码

1.<input type="text" value="disabled" disabled>

<input type="text" value="disabled" disabled>

方法三：在对象focus时立刻让它blur，使它无法获得焦点。

Html代码

1.<input type="text" value="onfocus=this.blur()" onfocus="this.blur()">

<input type="text" value="onfocus=this.blur()" onfocus="this.blur()">

提示：readonly和disabled的区别在于后者完全禁止与设置该属性的对象交互(表现为不可改写、不可提交等)。