Ext Form中的BACKSPACE键盘事件

如果我们在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(); }});