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随机漂浮广告代码具体实例
Nov 19 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
JavaScript中reduce()的用法
May 11 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类分享
2014/02/07 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript类库D
2010/10/24 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python join方法使用详解
2019/07/30 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
社团活动总结书
2014/06/27 职场文书
关于迟到的检讨书
2015/05/06 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
孝女彩金观后感
2015/06/10 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB