ExtJs中,如果设置输入框为只读属性,一般第一考虑的都是readonly=true
[img]http://dl2.iteye.com/upload/attachment/0090/8588/e5a8a3e0-049a-3b30-bc4d-37bb689347ea.jpg[/img]
它的效果和正常输入框一样,但是不允许输入;
然而,它很容易引起歧义,让用户第一感觉是它是输入框,有输入信息的冲动,其实不然;
这时候,可以考虑使用disabled=true属性
[img]http://dl2.iteye.com/upload/attachment/0090/8591/3f494df8-bf57-31f5-a229-e244fdeacdff.jpg[/img]
这下绝对不会认为可输入,一看就知道不允许修改,但字体颜色明显很模糊,所以效果不佳;
因此,使用中常常仍然使用readOnly=true,但修改背景颜色来做到disabled的更好效果表现,效果如下:
[img]http://dl2.iteye.com/upload/attachment/0090/8593/c4357674-b4fa-34ab-aba5-71926a02e0c3.jpg[/img]
明显感觉就是禁止输入,而且字体清晰,代码片段如下:
{columnWidth : 1,
layout : 'form',
defaults : {
xtype : "textfield",
width : 150,
allowBlank : true,
readOnly : true,style:'background:#E6E6E6'
},
items:[
{fieldLabel:'事件标题',name:'event_title',width:435}
]
},
为什么要选择readOnly而不是disabled呢,还有一个明显的区别:
disabled=true,表单提交时候无法把数据传递到后台Action层,而readOnly=true可以;这个区别和html中标签的disabled和readOnly属性区别是一致的。
[img]http://dl2.iteye.com/upload/attachment/0090/8588/e5a8a3e0-049a-3b30-bc4d-37bb689347ea.jpg[/img]
它的效果和正常输入框一样,但是不允许输入;
然而,它很容易引起歧义,让用户第一感觉是它是输入框,有输入信息的冲动,其实不然;
这时候,可以考虑使用disabled=true属性
[img]http://dl2.iteye.com/upload/attachment/0090/8591/3f494df8-bf57-31f5-a229-e244fdeacdff.jpg[/img]
这下绝对不会认为可输入,一看就知道不允许修改,但字体颜色明显很模糊,所以效果不佳;
因此,使用中常常仍然使用readOnly=true,但修改背景颜色来做到disabled的更好效果表现,效果如下:
[img]http://dl2.iteye.com/upload/attachment/0090/8593/c4357674-b4fa-34ab-aba5-71926a02e0c3.jpg[/img]
明显感觉就是禁止输入,而且字体清晰,代码片段如下:
{columnWidth : 1,
layout : 'form',
defaults : {
xtype : "textfield",
width : 150,
allowBlank : true,
readOnly : true,style:'background:#E6E6E6'
},
items:[
{fieldLabel:'事件标题',name:'event_title',width:435}
]
},
为什么要选择readOnly而不是disabled呢,还有一个明显的区别:
disabled=true,表单提交时候无法把数据传递到后台Action层,而readOnly=true可以;这个区别和html中标签的disabled和readOnly属性区别是一致的。