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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
js实现按座位号抽奖
Apr 05 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
基于axios封装fetch方法及调用实例
Feb 05 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
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
jquery each()源代码
2011/02/14 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
法学专业个人求职信
2013/09/26 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
中华魂演讲稿
2014/05/13 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
给校长的一封检讨书
2014/09/20 职场文书
六查六看心得体会
2014/10/14 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
挂靠协议书
2015/01/27 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android