Formatting the DisplayField date or number in Extjs extension _ extjs

When using Extjs, you sometimes need to format Ext. form. DisplyField. Some fields must be read-only when Ext. form. FormPanel is used to process data. Of course, we can use Ext. form. TextField and set it to ReadOnly. However, 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 or renderer event. For example, the Date Field var form = new Ext. form. formPanel ({
Frame: true,
RenderTo: 'form-p ',
Items: [{xtype: 'displayfield', fieldLabel: 'date', value: new Date ()}]
});
The display is a bit incorrect.

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. Then we changed the preceding FormPanel.

Var form = new Ext. form. FormPanel ({

Frame: true,

RenderTo: 'form-p ',

Items :[{

Xtype: 'displayfield ',

FieldLabel: 'date ',

Value: new Date (),

DateFormat:'m/d y'

}]

});

Perfect should be compared, hahaha