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 Ajax方法传值到action的方法
May 11 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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 代码优化的42条建议 推荐
2009/09/25 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
四年级学生评语大全
2014/04/21 职场文书
关于教师节的广播稿
2014/09/10 职场文书
代收款委托书范本
2014/10/01 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
个人年终总结范文
2015/03/09 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android