Extjs中DisplayField的日期或者数字格式化扩展
更新时间：2010年09月03日 22:17:52 作者：
在用Extjs的时候，有时需要对 Ext.form.DisplyField 进行格式化。
使用 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 的，哈哈哈
相关文章
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
键盘上的F5或者退格键等按键一般来说会触发页面的后退或者刷新事件,然而这些在前端用代码是可以给屏蔽掉的,这里我们就来看一下Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享2016-06-06
做图表的时候纵坐标很多值都是一样的，无意中发现下面的解决方法，其他版本没测试过。有兴趣的朋友可以自己测试2014-02-02
ExtJS table布局使用说明，需要的朋友可以参考下。2009-10-10
这篇文章主要介绍了ExtJS判断IE浏览器类型的方法,需要的朋友可以参考下2014-02-02
Ext GridPanel加载完数据后进行操作，比如load数据之后选定某些行数据,下面有个示例，需要的朋友可以参考下2014-06-06
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Extjs中TabPane在一些特殊用途时把其嵌在其他的网页中，很多新手朋友可能对此不是很熟悉，小编就在本文章中详细的介绍一下，感兴趣的你可不要错过了啊，希望本文对你有所帮助2013-01-01
ext下布局的实现代码。2009-04-04
刚刚参加完公司的项目，第一次使用extjs编写用户界面还是有点头痛，现在小花整理好了，希望为初学者做个参考。2009-12-12
拖拽效果想必大家都有见到过吧，实现方式大同小异，在接下来的文章中为大家详细介绍下使用ExtJS是如何做到的2013-12-12
Extjs gridpanel 出现横向滚动条问题的解决方法
Extjs gridpanel 出现横向滚动条问题的解决方法，在gridpanel中加入以下代码即可。2011-07-07
最新评论