微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Extjs中DisplayField的日期或者数字格式化扩展_extjs

php中文网
发布： 2016-05-16 18:20:10
原创
1248人浏览过
使用 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()
    }]
});
那它显示的就有点不正确了
 

那么我们可以重写一下 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',

Motiff妙多
Motiff妙多

Motiff妙多是一款AI驱动的界面设计工具，定位为“AI时代设计工具”

Motiff妙多 250
查看详情 Motiff妙多

　　　　　　value: new Date(),

　　　　　　dateFormat: 'm/d Y'

　　　　}]

});

应该还是比较 perfect 的，哈哈哈

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Jquery优化效率 提升性能解决方案_jquery 下一篇：JavaScript的类型简单说明_基础知识
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript类型检查_TypeScript接口设计 TypeScript的接口用于定义对象结构，支持属性、方法、函数类型约束、类实现及接口继承。通过静态类型检查提升代码质量与开发效率。
2025-11-19 08:58:31
767
JavaScript游戏开发_物理引擎集成与优化 选择适合的物理引擎并正确集成可显著提升JavaScript游戏的真实感与交互性。Matter.js轻量易用，适合2D益智或平台类游戏；Box2D通过WebAssembly提供高精度物理模拟，适用于对真实性要求高的项目；p2.js支持复杂多边形碰撞与约束系统，适合机械或车辆模拟。以Matter.js为例，首先引入库文件，创建引擎和渲染器，添加刚体对象到世界中，再启动引擎与渲染即可实现基本物理效果。为保证性能，应控制活动物体数量、简化碰撞形状、使用固定时间步长、合理设置求解器迭代次数，并及时清理废弃
2025-11-19 08:24:50
488
JavaScript事件系统_自定义事件分发 通过CustomEvent和dispatchEvent可实现JavaScript自定义事件，用于组件间解耦通信。首先创建携带数据的事件对象，再分发到指定元素，其他模块通过addEventListener监听该事件并获取数据，适用于表单与图表等跨模块交互场景。
2025-11-19 08:09:02
845
代码拆分：React.lazy与Suspense实现 React.lazy与Suspense可实现组件动态加载，减少初始包体积，提升首屏性能；通过import()动态引入组件，Suspense包裹并设置fallback加载提示，结合ReactRouter实现路由级代码拆分，配合ErrorBoundary处理加载失败，保障用户体验完整。
2025-11-19 07:23:34
790
JavaScript_消息队列与事件驱动架构 JavaScript通过消息队列和事件循环实现异步编程，消息队列暂存异步回调，事件循环在调用栈为空时将任务依次推入执行，微任务优先于宏任务，事件驱动架构则通过监听用户或系统事件触发回调，两者协同确保异步任务有序执行且不阻塞主线程。
2025-11-19 04:21:35
377
JavaScript错误处理_Try_Catch最佳实践 答案：合理使用try-catch需精准捕获可预期错误，如JSON解析或外部数据处理，避免包裹大段代码；在catch中通过error.name区分SyntaxError、TypeError等并分类处理，保留堆栈信息且不暴露敏感细节；异步操作中结合async/await与try-catch或Promise的.catch()确保异常被捕获，同时记录上下文日志并上报监控系统。
2025-11-19 02:37:21
392
ApexCharts在React Flexbox布局中的响应式调整与多图表集成 本文深入探讨了在React应用中将ApexCharts集成到Flexbox布局时常见的尺寸调整问题，特别是图表高度在窗口缩放时显示异常。核心解决方案在于确保图表容器拥有适当的弹性高度，并正确配置ApexCharts组件的尺寸属性。此外，文章还提供了在React中有效渲染多个ApexCharts实例的正确方法，避免了常见的组件结构错误，旨在帮助开发者构建响应式且功能丰富的仪表盘。
2025-11-18 23:28:00
684
JavaScript Canvas游戏开发：修复不显示的常见问题与调试指南 本文旨在解决JavaScript游戏在HTMLCanvas中无法正常显示的问题。核心原因通常包括Canvas元素未正确获取、关键变量（如帧计数器）未声明以及随机数生成等辅助函数实现不当。教程将详细介绍如何初始化Canvas上下文、定义必要变量和函数，并强调利用浏览器控制台进行调试的重要性，帮助开发者构建流畅的Canvas游戏体验。
2025-11-18 23:06:01
594
Phaser教程：向游戏对象组添加新子元素 Phaser中的游戏对象组（Group）是管理和操作多个游戏对象集合的关键工具。本文将详细介绍如何使用Group对象的create()方法，在运行时高效地创建并向组中添加新的子元素，涵盖其基本用法、参数配置以及在不同类型组（如普通游戏对象组和物理组）中的应用，以优化游戏场景管理。
2025-11-18 22:47:25
472
JavaScript数组浅比较优化实践 本文探讨了在JavaScript中高效进行数组浅比较的方法。从传统的基于循环的比较方式入手，逐步过渡到利用Array.prototype.every()方法实现更简洁、函数式风格的解决方案。文章详细阐述了两种方法的实现逻辑、代码示例及其在实际应用中的考量，并强调了浅比较与深比较的区别与适用场景。
2025-11-18 22:18:18
534
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部