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: '表示フィールド'、

フィールドラベル: '日付'、

値: new Date()

}]
});

少し間違って表示されます

次に、フォーマット属性

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 を書き換えます。

Ext.form.DisplayField に dateFormat とnumberFormat の 2 つの属性を追加し、上記の FormPanel を変更しました

var form = new Ext.form.FormPanel({

フレーム: true、

renderTo: 'form-div',

アイテム: [{

xtype: '表示フィールド'、

フィールドラベル: '日付'、

値: new Date()、

dateFormat: 'm/d Y'

}]

});

かなり完璧なはずです、ハハハ