解决EXT中Grid等组件读取Json数据的Date数据问题

java里面时间类型转换成json数据就成这样啦: "modifyTime":{"date":30, "day":3, "hours":15, "minutes":14, "month":3, "nanos":0, "seconds":38, "time":1209539678000, "timezoneOffset":-480, "year":108}
在gridpanel里面就会显示成[object,object],同样在表单中也显示[object,object].

从开始使用EXt以来,就被这个问题困扰,一直没解决这个问题,查了网上的解决办法,都没成功,而且,网上的办法也不简单.

今天实在受不了啦,就动手自己做了一下,没想到,很轻松的搞定了这个问题.(原创文章,转载请注明来源http://www.busfly.cn/post/ext-grid-json-date.html)

解决办法如下:

写一个render方法,转化成正确的Date数据就可以了.如下:

function renderDate(format) {
return function(v) {
var JsonDateValue;
if (Ext.isEmpty(v))
return '';
else if (Ext.isEmpty(v.time))
JsonDateValue = new Date(v);
else
JsonDateValue = new Date(v.time);
return JsonDateValue.format(format || 'Y-m-d H:i:s');
};
};

在ColumnModel里面这样写

{
header : "birthday",
renderer : renderDate('Y-m-d'),
dataIndex : 'birthday',
align : 'center'
}

OK,搞定了,这样就可以正常显示Date类型的数据了.

在Form表单等其它地方的数据也是一样,写个方法转化一下就可以了.但是,DateField没有renderer 这样的东西设置,那咋办?

那就只好对DateField重写一下喽,代码如下

Ext.override(Ext.form.DateField, {
setValue : function(date) {
if (Ext.isEmpty(date)) {
}
else if (Ext.isEmpty(date.time)) {
date = new Date(date);
}
else {
date = new Date(date.time);
}
Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
}
});

=======================================================================================

目前整理一下,最后定稿如下:

/**
* 将Json中Date长串,转成Js中的时间串
* @param {} value
* @return {}
*/
function readJsonDate(JsonDateValue, format) {
var o;
if (Ext.isEmpty(JsonDateValue))
return '';
else if (Ext.isEmpty(JsonDateValue.time))
o = new Date(JsonDateValue);
else
o = new Date(JsonDateValue.time);
return o.format(format || 'Y-m-d H:i:s');
};
/**
* 主要用在Grid中
* @param {} format
* @return {}
*/
function renderDate(format) {
return function(v) {
return readJsonDate(v, format);
};
};

在ColumnModel里面这样写
{
header : "birthday",
renderer : renderDate('Y-m-d'),
dataIndex : 'birthday',
align : 'center'
}

//DateField重写

Ext.override(Ext.form.DateField, {
setValue : function(date) {
if (Ext.isEmpty(date)) {
}
else if (Ext.isEmpty(date.time)) {
date = new Date(date);
}
else {
date = new Date(date.time);
}
Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
}
});