ExtJs中处理后台传过来的date对象显示到页面上

在使用ExtJs开发时会遇到这样的问题,后台传来一个java对象,里面有一个date类型的数据,现在要显示到页面上,我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法:例如:在员工查询页面上,员工表中有个生日这一字段,在页面上我们需要显示日期即Date。从后台传过来的是employer这个对象,这个对象中有一个birthday这一字段(Date)类型。 在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型(Model)**: 当你从后端获取数据时,数据通常是JSON格式。在ExtJs中,你需要定义一个数据模型来匹配这些数据结构。对于包含Date类型的字段,如`birthday`,你需要在模型中指定其类型为'date'。例如: ```javascript Ext.define('Employee', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'birthday', type: 'date', mapping: 'birthday.time'} ] }); ``` 这里的`mapping`属性用于指定从JSON对象中提取日期的路径,因为JSON中Date对象通常会被转化为包含时间戳的属性。 2. **配置存储(Store)**: 创建一个Store来管理你的数据,并与Model关联。你需要设置`proxy`来处理与服务器的通信,并且在`reader`中定义日期格式。例如: ```javascript var store = Ext.create('Ext.data.Store', { model: 'Employee', proxy: { type: 'ajax', url: '/api/employees', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); ``` 3. **定义列模型(ColumnModel)**: 在GridPanel中,你需要定义列模型来展示数据。对于日期列,你可以使用`renderer`来指定一个日期格式化函数。例如: ```javascript var cm = new Ext.grid.ColumnModel({ columns: [ {header: '姓名', dataIndex: 'name', flex: 1}, { header: '生日', sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s') } ] }); ``` `renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 创建GridPanel并附加到ColumnModel和Store: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: store, cm: cm, renderTo: Ext.getBody() }); ``` 通过以上步骤,ExtJs就能正确地解析后台传来的Date对象,并按照指定的格式在页面上显示。这种方法避免了在后台将Date对象转换为字符串,提高了前后端交互的效率和灵活性。同时,由于使用了专门的日期渲染器,用户界面的显示也会更加友好。

































- zw10212013-04-02grid里面可以用,非grid怎么用呢?
- np134758638512013-12-13东西没讲清楚,看完懵懵懂懂
- marine02282013-07-04不是我想要的,不过东西挺好

- 粉丝: 4
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 浅析高职院校计算机房管理存在的问题及应对措施.docx
- (NDGJ--)火力发电厂电子计算机监视系统设计技术规定.doc
- 自动化学院科技英语复习考试词汇.doc
- WIN7数据恢复软件安装使用大全.doc
- 专业技术人员职业素养与发展网络仅需课试题与复习资料.docx
- 自动化工程师考试.doc
- 课堂为舞台网络为后台的产品设计方案网络课程研究.doc
- 2008年机械制造及自动化专业(数控)人才需求市场调研报告.doc
- 备煤系统安全检查表.doc
- 简析人工智能的发展领域与展望.docx
- VGG16 深度卷积神经网络模型解析
- matlab在数制调制中的应用分析研究.doc
- 网络工程专业应用型人才培养模式改革探索.docx
- 技工学校《计算机组装与维修》实训教学模式的探讨.docx
- XX家苑项目管理营销策划建议书.doc
- 数据库原理与应用课程设计之学籍管理系统(免费力荐).doc


