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

编辑：rootadmin

使用 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'

　　　　}]

});

推荐整理分享Extjs中DisplayField的日期或者数字格式化扩展，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

应该还是比较 perfect 的，哈哈哈

extjs grid设置某列背景颜色和字体颜色的实现方法 css代码：.x-grid-back-red{background:#FF;}js代码：{header:'分成类型',dataIndex:'divideType',renderer:function(v,m){m.css='x-grid-back-red';returnv;},width:}或者直接这样写也可

ExtJs事件机制基本代码模型和流程解析代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他

ExtJS 入门开始...在ExtJS里最常用的,应该就是Ext.onReady这个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页

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

本文链接地址:https://www.jiuchutong.com/biancheng/370245.html 转载请保留说明！

上一篇：extjs grid设置某列背景颜色和字体颜色的方法

下一篇：extjs grid设置某列背景颜色和字体颜色的实现方法