首页 > Web开发 > 详细

ExtJs在disabled和readOnly美学分析

时间:2015-08-18 09:01:31      阅读:186      评论:0      收藏:0      [点我收藏+]

ExtJs中disabled和readOnly美观度的分析

ExtJs中。假设设置输入框为仅仅读属性,一般第一考虑的都是readonly=true

技术分享

它的效果和正常输入框一样,可是不同意输入;

然而,它非常easy引起歧义,让用户第一感觉是它是输入框,有输入信息的冲动,事实上不然;

这时候,能够考虑使用disabled=true属性

技术分享

这下绝对不会觉得可输入,一看就知道不同意改动,但字体颜色明显非常模糊,所以效果不佳;

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

技术分享

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

{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美学分析

原文:http://www.cnblogs.com/bhlsheji/p/4738293.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!