解决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)));
    }
});

Tags: ext EXT2 javascript 原创 |

原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.net/

本文链接地址：http://www.busfly.net/post/ext-grid-json-date.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~