如果我们在Ext Form中有ReadOnly的TextField,那么其实我们鼠标点击该输入框,是能够获得鼠标焦点的,只是我们不能修改其中的值。
但是如果我们没注意,在ReadOnly的输入框按BACKSPACE键,本意是以为能够修改,对之前的内容进行删除,但是实际上因为其ReadOnly属性,不能修改,会导致其跳转到历史上一页,这不是我们期望的。
所以,我们可以采用如下方法来避免这个问题。
含ReadOnly的Form如下:
var form = new Ext.FormPanel({ labelSeparator : ":", frame:true, border:false, items : [ { xtype :'textfield', width : 200, allowBlank : false, name : 'name', fieldLabel : '姓名', readOnly : true //以ReadOnly显示,鼠标可以获得焦点 },{ xtype:'textfield', width : 200, allowBlank : false, name : 'address', fieldLabel:'住址' }] });
我们只需要加一句:
//取消readonly的组件在BACKSPACE时键盘事件时返回上一个页面 Ext.EventManager.on(Ext.isIE ? document : window, "keydown", function(e, t) { if (e.getKey() == e.BACKSPACE &&(t.disabled || t.readOnly)) { e.stopEvent(); }});