ExtJs中disabled和readOnly美觀度的分析

標籤：style   class   ext   c   color   http   

ExtJs中disabled和readOnly美觀度的分析

ExtJs中，如果設定輸入框為唯讀屬性，一般第一考慮的都是readonly=true

它的效果和正常輸入框一樣，但是不允許輸入；

然而，它很容易引起歧義，讓使用者第一感覺是它是輸入框，有輸入資訊的衝動，其實不然；

這時候，可以考慮使用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屬性區別是一致的。