`
meganlee
  • 浏览: 87846 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs日期格式问题(二)

EXT 
阅读更多
一般我们的前台代码Ext.grid.ColumnModel里会这样写,以便显示日期格式:

Js代码
1.....  
2.{header:"birthday",dataIndex:"birthday".......renderer:new Ext.util.Format.dateRenderer("Y-m-d"),  
3..... 
....
{header:"birthday",dataIndex:"birthday".......renderer:new Ext.util.Format.dateRenderer("Y-m-d"),
....
如果你前台这样写的话,那恭喜你,你的显示日期那列将不再正确显示时间,而是显示为"NaN-NaN-NaN",是吧?呵呵,问我怎么知道的?因为最开始我也是这么错的。 为什么会是错的呢?让我们来看看Ext.format.dateRenderer的源代码(开源的东西就是好),它的源代码是这样的:

Js代码
1.dateRenderer : function(format) {  
2.    return function(v) {  
3.        return Ext.util.Format.date(v, format);、  
4.    }  
5.} 
dateRenderer : function(format) {
return function(v) {
return Ext.util.Format.date(v, format);、
}
} 可以看出,我们传会来的值,被当做日期又被格式化了一次,我们传回来的是日期吗?以前是,经过昨天后台代码的修改,我们传回来的仅仅是个字符串了,至于为什么要这么改,请看昨天写的“Extjs日期格式问题(一) ”,那咋办?有的朋友应该已经想到了,既然是字符串,那就直接显示呗,不用renderer了,于是前台代码Ext.grid.ColumnModel里就变成了:

Js代码
1.....  
2.{header:"birthday",dataIndex:"birthday".......),  
3..... 
....
{header:"birthday",dataIndex:"birthday".......),
....可以负责任的告诉你,这样写,绝对可以正确显示了,这样是不是感觉更简单了呢?



但是,基于我项目里的要求,这个问题并没有解决完,因为在这里不是一个简单的gridpanel,而是一个editgridpanel,所以还得定义一个editor,于是有了下面这样一段代码:

Js代码
1.....  
2.{header:"birthday",dataIndex:"birthday".......,  
3.      editor:new Ext.grid.GridEditor(new Ext.form.DateField({format:"Y-m-d"})),  
4..... 
....
{header:"birthday",dataIndex:"birthday".......,
      editor:new Ext.grid.GridEditor(new Ext.form.DateField({format:"Y-m-d"})),
....加了这个DateField控件后,每次可以正常的选择日期,但是选择完日期后,grid里显示的格式就又不正确了,这次显示的内容成了: "Wed Mar 04 1970......",这样的格式一看就是个日期,这样显示的原因当然是因为我们没有写renderer进行格式化处理的缘故。。。

说到这里,有人应该已经想到解决办法了,另外有些人可能就抓狂了,这renderer加了不能正常显示,不加也不能正常显示,这很矛盾啊。。

问题往往到了最矛盾的时候,也是到了解决的时候,现在我把解决代码贴出来,大家一看就明白了。多的不说,看代码:

Js代码
1.renderer:function(value){  
2.    if(value instanceof Date){  
3.        return new Date(value).format("Y-m-d");  
4.    }else{  
5.        return value;  
6.    }  
7.} 
renderer:function(value){
if(value instanceof Date){
return new Date(value).format("Y-m-d");
}else{
return value;
}
} 简单吧?自己写renderer就是了。。



问题就这样解决了,不过这样看起来不是很优雅,所以我重写了源代码,另外如果有朋友有更好的方式,请不吝赐教~谢谢


分享到:
评论
2 楼 energysh 2013-06-05  
不错不错,正在纠结这个问题。解决完毕
十分感谢!!
1 楼 364434006 2010-10-03  
楼主,我今天也遇到日期格式问题了,不知道你现在有没有更好的解决方式了?
  期待...

相关推荐

    EXTJS_DATEFORMAT 日期格式对应

    EXTJS_DATEFORMAT 日期格式对应,网上找到的,挺好用的

    extjs日期显示(如何转换日期格式)

    extjs日期显示(如何转换日期格式),亲自试验过的,extjs6中可以使用的

    extjs My97使用 extjs时间 extjs日期使用

    extjs4.0结合My97DatePicker4.7版本使用 使用简单 方便 解决extjs中日期控件不能显示时间的问题 下载后将其放到extjs目录的examples下 直接运行date.html即可 extjs4.0版本 4.0以前的版本没有测试过 如果有4.0版本...

    EXTJS日期扩展年月和年月日时分秒

    从网上搜集的一些好用的js文件。分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1...注:这些功能在IE6 、 IE8 、 Firefox 以及google 浏览器下测试没有问题!

    EXTJS.GRIDPANEL 日期格式

    EXTJS.GRIDPANEL中日期格式 设置

    Extjs5 日期时间

    日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式显示为横向的日期、时间,非日期弹出框下方选择日期。 调用代码:Ext.create('erp.ux.form.field.DateTimer', {...

    extjs 年月日期插件

    extjs中有时候查询需要通过日期(年月)查询。而这就是一个只显示年月的日期插件,很好用

    ExtJs 带清空功能的日期组件

    ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。

    ExtJS日期时间选择控件示例

    ExtJS日期时间控件。详细信息参照我的博文: http://blog.csdn.net/lvye1221/article/details/10225941 这是我在 apache 目录下部署了测试示例。将附件中的测试用例,按照以下方式部署好,即可成功访问: apache ...

    简洁的EXTJS日期选择插件.rar

    一款简洁的外观基于EXTJS的日期选择插件,日历插件,在网页上选择日期使用的小插件,按照ext DatePicker素材及思想简化重新实现日历选择器,尚未实现:键盘导航,小时分钟选择,  1.Date api ,某日属于周几,某月...

    Extjs5 日期时间公共组件

    日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式为横向的日期、时间,非日期弹出框下方选择时间。 注意事项:1、只有日期、年、月、日全部选择后,才能从name中...

    extjs 日期时间

    extjs2.0实现的日期时间选择控件,直接放在extjs的examples文件夹下运行。

    extjs日期+时间控件

    http://www.uspcat.com/forum.php?mod=viewthread&tid=5293 帖子上的日期时间控件有显示的问题,现在修改一下发出来, 该控件基于4.1版本

    ExtJS日期多选组件源码

    ExtJS日期多选组件源码 日期一般是单选,有时间有需要选择多个日期的情况,返回一个日期的数组。

    Extjs4.1可用的日期时间选择控件

    Extjs4.1可使用的日期时间选择控件,其中有一些不合理之处请各位多提宝贵意见。

    Extjs日期控件汉化版

    Extjs日期控件汉化版

    Extjs6 日期时间控件

    extjs6 的日期时间控件,在日期控件的基础上添加了时间控件,使用combobox下拉选择时间,比使用numberfield更易操作。

    extjs时间日期选择组件

    extjs时间日期选择组件.

    EXTJS5 日期时分秒控件

    EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...

    ExtJs日期时间选择控件

    一个常用的ExtJs的日期时间选择控件,可以实现日期和时间的选择

Global site tag (gtag.js) - Google Analytics