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 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
利用js对象弹出一个层
2008/03/26 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python自动连接ssh的方法
2015/03/07 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python图像读写方法对比
2020/11/16 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
酒店总经理职务说明书
2014/02/26 职场文书
洗车工岗位职责
2014/03/15 职场文书
书法大赛策划方案
2014/06/04 职场文书
宣传标语大全
2014/07/01 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python