热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

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

发布时间:2010年09月18日点击数: 佚名

在用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 这个事件,比如日期字段
 
 
  1. var form = new Ext.form.FormPanel({  
  2.  frame: true,  
  3.  renderTo: 'form-div',  
  4.  items: [{ xtype: 'displayfield', fieldLabel: 'Date', value: new Date() }]  
  5. });  
那它显示的就有点不正确了
 

那么我们可以重写一下 Ext.form.DisplayField,让他支持 format 属性

  1. Ext.override(Ext.form.DisplayField, {  
  2.     getValue: function () {  
  3.         return this.value;  
  4.     },  
  5.     setValue: function (v) {  
  6.         this.value = v;  
  7.         this.setRawValue(this.formatValue(v));  
  8.         return this;  
  9.     },  
  10.     formatValue: function (v) {  
  11.         if (this.dateFormat && Ext.isDate(v)) {  
  12.             return v.dateFormat(this.dateFormat);  
  13.         }  
  14.         if (this.numberFormat && typeof v == 'number') {  
  15.             return Ext.util.Format.number(v, this.numberFormat);  
  16.         }  
  17.         return v;  
  18.     }  
  19. });  
 
我们给 Ext.form.DisplayField 加了两个属性: dateFormat 和 numberFormat,然后我们将上面的 FormPanel 改一下
 
  1. var form = new Ext.form.FormPanel({  
  2.      frame: true,   
  3.     renderTo: 'form-div',   
  4.     items: [{  
  5.        xtype: 'displayfield',   
  6.       fieldLabel: 'Date',   
  7.       value: new Date(),   
  8.       dateFormat: 'm/d Y'   
  9.     }]  
  10.  });  

 

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作