Date or number formatting extension for DisplayField in Extjs_extjs

When using Ext.form.FormPanel to process data, some fields need to be read-only. Of course we can use Ext.form.TextField and then set it to ReadOnly, but the display effect is not very good because there will always be an input box. So we must use Ext.form.DisplayField, but Ext.form.DisplayField does not have a format attribute, nor does it have the renderer event, such as the date field

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

xtype: 'displayfield',

fieldLabel: 'Date',

value: new Date()

}]
});

Then it displays a bit incorrectly

Then we can rewrite Ext.form.DisplayField to support the format attribute

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;
  }
});

We added two attributes to Ext.form.DisplayField: dateFormat and numberFormat, and then we changed the above FormPanel

var form = new Ext.form.FormPanel({

frame: true,

renderTo: 'form-div',

items: [{

xtype: 'displayfield',

fieldLabel: 'Date',

Value: new Date(),

dateFormat: 'm/d Y'

　}]

});

It should be quite perfect, hahaha