Extjs中DisplayField的日期或者数字格式化扩展
更新时间:2010年09月03日 22:17:52 作者:
在用Extjs的时候,有时需要对 Ext.form.DisplyField 进行格式化。
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
使用 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: [{
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 的,哈哈哈
相关文章
Extjs Label的 fieldLabel和html属性值对齐的方法
这篇文章主要介绍了Extjs Label的 fieldLabel和html属性值不能对齐的解决方法,需要的朋友可以参考下2014-06-06
最新评论