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

　　推荐阅读

　　基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 【实例演示】 1 2 3 4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]【原理简述】 这里大概说一下整个>>>详细阅读

本文标题：Extjs中DisplayField的日期或者数字格式化扩展

地址：http://www.17bianji.com/kaifa2/JS/25781.html

 1/2    1