码迷,mamicode.com
首页 > Web开发 > 详细

ExtJs中disabled和readOnly美观度的分析

时间:2014-05-11 21:03:49      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:style   class   ext   c   color   http   

ExtJs中disabled和readOnly美观度的分析

ExtJs中,如果设置输入框为只读属性,一般第一考虑的都是readonly=true

bubuko.com,布布扣

它的效果和正常输入框一样,但是不允许输入;

然而,它很容易引起歧义,让用户第一感觉是它是输入框,有输入信息的冲动,其实不然;

这时候,可以考虑使用disabled=true属性

bubuko.com,布布扣

这下绝对不会认为可输入,一看就知道不允许修改,但字体颜色明显很模糊,所以效果不佳;

因此,使用中常常仍然使用readOnly=true,但修改背景颜色来做到disabled的更好效果表现,效果如下:

bubuko.com,布布扣

明显感觉就是禁止输入,而且字体清晰,代码片段如下:

{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属性区别是一致的。

ExtJs中disabled和readOnly美观度的分析,布布扣,bubuko.com

ExtJs中disabled和readOnly美观度的分析

标签:style   class   ext   c   color   http   

原文地址:http://blog.csdn.net/yuanqingyu0123/article/details/25543567

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!