ExtJs在disabled和readOnly美学分析

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',435}
   ]
  },

为什么要选择readOnly而不是disabled呢。另一个明显的差别：

disabled=true，表单提交时候无法把数据传递到后台Action层，而readOnly=true能够；这个差别和html中标签的disabled和readOnly性能差异是一致的。

版权声明：本文博客原创文章，博客，未经同意，不得转载。