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


Posted in Javascript onSeptember 03, 2010
使用 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()
    }]
});
那它显示的就有点不正确了
Extjs中DisplayField的日期或者数字格式化扩展
 

那么我们可以重写一下 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 的,哈哈哈

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
JavaScript的类型简单说明
Sep 03 #Javascript
JavaScript类和继承 this属性使用说明
Sep 03 #Javascript
JavaScript类和继承 prototype属性
Sep 03 #Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 #Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 #Javascript
原生javascript实现图片轮播效果代码
Sep 03 #Javascript
IE6不能修改NAME问题的解决方法
Sep 03 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python self,cls,decorator的理解
2009/07/13 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python 高阶函数简单介绍
2021/02/19 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
学术会议欢迎词
2014/01/09 职场文书
迟到检讨书500字
2014/02/05 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Django基础CBV装饰器和中间件
2022/03/22 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android