Extjs中DisplayField的日期或者數(shù)字格式化擴(kuò)展

2019-11-21 00:15:49

字體：大中小

供稿：網(wǎng)友

使用 Ext.form.FormPanel 來處理數(shù)據(jù)時(shí)候，某些字段是需要只讀的。當(dāng)然我們可以使用 Ext.form.TextField，然后設(shè)置成 ReadOnly，不過這樣子的顯示效果不是很好，因?yàn)槭冀K會有個(gè)輸入框。所以我們必須使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 沒有一個(gè)format的屬性，也不具備 renderer 這個(gè)事件，比如日期字段

var form = new Ext.form.FormPanel({
frame: true,
renderTo: 'form-div',
items: [{

xtype: 'displayfield',

fieldLabel: 'Date',

value: new Date()

}]
});

那它顯示的就有點(diǎn)不正確了

那么我們可以重寫一下 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 加了兩個(gè)屬性： 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'

　　　　}]

});