Extjs中DisplayField的日期或者數字格式化擴充

使用 Ext.form.FormPanel 來處理資料時候，某些欄位是需要唯讀。當然我們可以使用 Ext.form.TextField，然後設定成 ReadOnly，不過這樣子的顯示效果不是很好，因為始終會有個輸入框。所以我們必須使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 沒有一個format的屬性，也不具備 renderer 這個事件，比如日期欄位var form = new Ext.form.FormPanel({
frame: true,
renderTo: 'form-div',
items: [{ xtype: 'displayfield', fieldLabel: 'Date', value: new Date() }]
});那它顯示的就有點不正確了

那麼我們可以重寫一下 Ext.form.DisplayField，讓他支援 format 屬性

Ext.override(Ext.form.DisplayField, {  getValue: function () {    return this.value;  },  setValue: function (v) {    this.value = v;    this.setRawValue(this.formatValue(v));    return this;  },  formatValue: function (v) {    if (this.dateFormat && Ext.isDate(v)) {      return v.dateFormat(this.dateFormat);    }    if (this.numberFormat && typeof v == 'number') {      return Ext.util.Format.number(v, this.numberFormat);    }    return v;  }});

我們給 Ext.form.DisplayField 加了兩個屬性： dateFormat 和 numberFormat，然後我們將上面的 FormPanel 改一下

var form = new Ext.form.FormPanel({

　　　　frame: true,

　　　　renderTo: 'form-div',

　　　　items: [{

　　　　　　xtype: 'displayfield',

　　　　　　fieldLabel: 'Date',

　　　　　　value: new Date(),

　　　　　　dateFormat: 'm/d Y'

　　　　}]

});

應該還是比較 perfect 的，哈哈哈