Extjs里表格grid显示日期类型数据

尽管返回的JSON里都没有数字和字符串，但在EXT里我们同样可以从后台获得日期类型的数据，然后交给表格初始化。

我们在定义store的render里增加一行配置，除了设置name以外，还设置了type和dataFormat两个属性。其中type属性会告诉reader在解析原始数据时把对应的列作为日期类型处理，dataFormat属性把得到的字符串转换成相对应的日期格式。按照EXT的约定，Y是年，m是月，d是日，H是小时，i是分钟，s是秒。

var store = new Ext.data.Store({         proxy: new Ext.data.MemoryProxy(data),         reader: new Ext.data.ArrayReader({}, [             {name: 'id'},             {name: 'name'},             {name: 'descn'},             {name: 'date', type:'date',dateFormat: 'Y-m-dTH:i:s'}         ])     });

我们还需要在cm里增加一行配置，并且配置了renderer属性用来格式化日期格式的数据，代码如下：

var cm = new Ext.grid.ColumnModel([         {header:'编号',dataIndex:'id'},         {header:'名称',dataIndex:'name'},         {header:'描述',dataIndex:'descn'},         {header:'日期',dataIndex:'date', renderer: Ext.util.Format.dateRenderer('Y-m-d')}     ]);

页面显示的效果就是renderer属性对应的格式。


二、

在Grid的cm里面定义列的时候使用renderer 属性进行修改日期格式.由于在用.net把List<T>转成json的时候会把日期类型转化成不是常用的格式所以我们需要利用js把他转换过来.

第一步需要把他转换成js认识的Date格式:new Date(parseInt(val.substring(6, val.length - 2)))

第二步再把Date按照你的要求进行转化,我这里是扩展了一个format方法

   1:  Date.prototype.format = function(format) {

   2:      var o =

   3:                  {

   4:                      "M+": this.getMonth() + 1, //month

   5:                      "d+": this.getDate(),    //day

   6:                      "h+": this.getHours(),   //hour

   7:                      "m+": this.getMinutes(), //minute

   8:                      "s+": this.getSeconds(), //second

   9:                      "q+": Math.floor((this.getMonth() + 3) / 3), //quarter

  10:                      "S": this.getMilliseconds() //millisecond

  11:                  }

  12:   

  13:      if (/(y+)/.test(format))

  14:          format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

  15:      for (var k in o)

  16:          if (new RegExp("(" + k + ")").test(format))

  17:          format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));

  18:      return format;

  19:  }

下面是具体Grid日期列的定义

   1:  {dataIndex : 'BillDate',

   2:          header : '用电日期',

   3:          hidden : false,

   4:          renderer : function (val) {

   5:      return new Date(parseInt(val.substring(6, val.length - 2))).format('yyyy-MM-dd')

   6:      }

   7:      ,

   8:          sortable : false

   9:      }