Extjs中DisplayField的日期或者数字格式化扩展

在用Extjs的时候，有时需要对 Ext.form.DisplyField 进行格式化。

使用 Ext.form.FormPanel 来处理数据时候，某些字段是需要只读的。当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 没有一个format的属性，也不具备 renderer 这个事件，比如日期字段，那它显示的就有点不正确了

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