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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
vue实现简单瀑布流布局
May 28 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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生成HTML静态页面实例代码
2008/08/31 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
浅说js变量
2011/05/25 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python获得图片base64编码示例
2014/01/16 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python3爬虫怎样构建请求header
2018/12/23 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
车间主管岗位职责
2013/11/14 职场文书
前台接待员岗位职责
2014/01/02 职场文书
食品安全工作方案
2014/05/07 职场文书
收款委托书范本
2014/09/11 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js