Ext表格中日期类型显示为[object Object] 或者 NAN-NAN-NAN（转载）

转载：根据这位专家提供的方案，已经解决我的问题，特此保留下来，感谢原创作者！

Extjs日期格式问题(一)

（实际项目，完整解决方案）

 

因为工作原因，最近主攻Exj了，Ext可真是个好东西，不过由于新学，问题也不少，什么乱码啦，日期格式啦，搞得人头都大了，不过还好，现在互联网这么发达，查查baidu，google几乎就能找到自己要的答案，不过关于日期格式的问题，网上少了几篇详细的，有价值的文章，所以，今天我就来说说这个日期格式的问题，这也是我刚刚在实际项目解决的问题。

 

我先描述一下我的项目吧

      项目架构是：struts2.0 + spring + hibernate + extjs 3.0

      数据库为：mysql

 

首先我需要做一个EditGridPanel，显示的一个用户列表（一个List<User>），在这个用户列表里有一个单元格要以“年-月-日”的格式显示用户生日，这个单元格要求能用DateField控件修改。

 

(...今天不说ssh2，所以我直接说和Extjs相关的部分了)

 

基于这个要求，我首先想到后台可以用JSONObject这个类把后台的javabean转换为json类型的数据，然后通过printwriter流把数据传递到前台,下面是相关代码：

 

Java代码  

1. Action.java:  
2. ....  
3. JSONObject jsonObject = JSONObject.fromObject(pageBean,UtilBox.configJson());  
4. HttpServletResponse response = this.getHttpServletResponse();  
5. PrintWriter pw = response.getWriter();  
6. pw.write(jsonObject.toString());  
7. ...  

有人要问了，pageBean是个什么东西？我这样说吧，为了实现Extjs的分页，我写了一个PageBeanlei类，里面就两个属性，一个是List，用于放用户信息的集合，另一个是这个list的总条数，怎么样，这个pageBean不用多说了吧？关键是后面这个UtilBox.configJson(),这又是个啥呢？这是一个JsonConfig类型的参数，用于解析第一个参数里的属性类型，UtilBox就是我自己写的一个工具类，为了复用嘛，下面是它的代码：

Java代码  

1. Utilbox.java :  
2.   
3. ....  
4. public static JsonConfig configJson(){  
5.     JsonConfig jcf = new JsonConfig();  
6.     jcf.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  
7.     return jcf;  
8. }  
9. ....  

 简单几行代码。等等。。这个Extjs的日期格式有什么关系啊？

之所以要写这个，是因为json-lib对java的日期格式仿佛未作任何处理，通过打印Action里json.toString发现，传回前台的json是的格式为：{"date":17,"day":0",hour":17,........."year":109},这样显然加重了对日期解析的苦难，于是我们可以通过实现json-lib预留的扩展接口JsonValueProcessor来完成对日期的解析，

Java代码  

1. jcf.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());  

这里表示，遇到Date类型的参数，我们将用JsonDateValueProcessor这个类来解析。JsonDateValueProcessor是我自己定义的一个实现了JsonValueProcessor的类，下面是它的代码：

Java代码  

1. JsonDateValueProcessor .java:  
2.   
3. public class JsonDateValueProcessor implements JsonValueProcessor {  
4. private String format = "yyyy-MM-dd";  
5.   
6. public JsonDateValueProcessor() {  
7. }  
8. public Object processArrayValue(Object value, JsonConfig jcf) {  
9.     String[] obj = {};  
10.     if(value instanceof Date[]){  
11.         SimpleDateFormat sdf = new SimpleDateFormat(format);  
12.         Date[] dates = (Date[])value;  
13.         obj = new String[dates.length];  
14.         for(int i=0;i<dates.length;i++){  
15.             obj[i] = sdf.format(dates[i]).trim();  
16.         }  
17.     }  
18.     return obj;  
19. }  
20.   
21. public Object processObjectValue(String key, Object value, JsonConfig jcf) {  
22.     if(value instanceof Date){  
23.         String str = new SimpleDateFormat(format).format((Date)value);  
24.         return str.trim();  
25.     }  
26.     return value==null?null:value.toString();  
27. }  

 

好了，完成这样的工作后，我们再看看Action里的json.toString后的结果是什么样的呢？{"birthday":"1970-10-01".....}这样的json数据对于Extjs来讲，好解析多了吧~？

 

好，如果你自己搭建的Extjs只是需要显示日期格式，那这样就可以了

 

不过我的项目是要求不仅能显示，还要能通过DateField修改，这样新的问题就出现了，

 

为了避免单篇blog过长，此篇就先到这里了，如果有感兴趣接着往下看的，请等明天我把后面的问题和解决方案，以及相关代码贴出来，供大家探讨。。

 

（不是我吊大家胃口哈，是要上班了，午休时间结束了，体谅，体谅，另外，如果各位看完觉得还行的话，请顶一下，先谢各位了）

（实际项目，完整解决方案）

 

Extjs日期格式问题(二)

好，今天如约来完成Extjs日期格式问题的下半部分，嘿嘿，我还是遵守约定的。

 

我们接着昨天的说，昨天很多人看了我的代码后，可能有的人已经去试过了，有人会发现日期格式不再错误，有人会发现日期格式错误依然，有人会发现老问题不在了，新问题又来了。。。呵呵，这可不是我代码的问题，这都是正常的，问题出在前台对后台Json对象的使用上，我们这里先来看几个代码例子。。

 

一般我们的前台代码Ext.grid.ColumnModel里会这样写，以便显示日期格式：

Js代码  

1. ....  
2. {header:"birthday",dataIndex:"birthday".......renderer:new Ext.util.Format.dateRenderer("Y-m-d"),  
3. ....  

 如果你前台这样写的话，那恭喜你，你的显示日期那列将不再正确显示时间，而是显示为"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. }  

 可以看出，我们传会来的值，被当做日期又被格式化了一次，我们传回来的是日期吗？以前是，经过昨天后台代码的修改，我们传回来的仅仅是个字符串了，至于为什么要这么改，请看昨天写的“Extjs日期格式问题(一)”，那咋办？有的朋友应该已经想到了，既然是字符串，那就直接显示呗，不用renderer了，于是前台代码Ext.grid.ColumnModel里就变成了：

Js代码  

1. ....  
2. {header:"birthday",dataIndex:"birthday".......),  
3. ....  

可以负责任的告诉你，这样写，绝对可以正确显示了，这样是不是感觉更简单了呢？

 

但是，基于我项目里的要求，这个问题并没有解决完，因为在这里不是一个简单的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. ....  

加了这个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就是了。。

 

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

 

如果大家觉得我写这么多，值得鼓励一下的话，请帮我顶一下哈，谢了