Extjs_extjs의 DisplayField에 대한 날짜 또는 숫자 형식 확장

Ext.form.FormPanel을 사용하여 데이터를 처리할 때 일부 필드는 읽기 전용이어야 합니다. 물론 Ext.form.TextField를 사용하여 ReadOnly로 설정할 수도 있지만 항상 입력 상자가 있기 때문에 표시 효과가 그리 좋지 않습니다. 그래서 Ext.form.DisplayField를 사용해야 하는데 Ext.form.DisplayField에는 형식 속성이 없고 날짜 필드와 같은 렌더러 이벤트도 없습니다

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

xtype: 'displayfield',

fieldLabel: '날짜',

값: 새 날짜()

}]
});

그러면 조금 잘못 표시됩니다

그런 다음 형식 속성을 지원하도록 Ext.form.DisplayField를 다시 작성할 수 있습니다.

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({

프레임: true,

renderTo: 'form-div',

항목: [{

xtype: 'displayfield',

fieldLabel: '날짜',

값: new Date(),

날짜 형식: 'm/d Y'

　}]

});

아주 완벽할 텐데, 하하하