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 的，哈哈哈