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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vue下canvas裁剪图片实例讲解
Apr 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文件压缩之PHPZip类用法实例
2015/06/18 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
jQuery实现日历效果
2020/09/11 jQuery
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python基于select实现的socket服务器
2016/04/13 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python实现电脑自动关机
2018/06/20 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
管理科学大学生求职信
2013/11/13 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
庆元旦广播稿
2014/02/10 职场文书
年终工作总结范文
2019/06/20 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android