在Ext中EditorGrid中datefield输入问题解决过程

在Ext中EditorGrid中datefield输入问题解决过程

近日自己做了一个小项目，要用Ext做界面，以前没用过ext，对JavaScript也是一知半解，就边学边做，这是我在这个过程中遇到一个问题的解决过程，欢迎大家批评指正。

一、问题开始
在可编辑表格中有一个日期域，我希望能通过Ext中的日期输入域输入指定格式的日期，以便提交给服务器后方便处理。然而却出现了一些问题。

在这个生产日期列我设置的column model 为
{header:'生产日期',dataIndex:'p_date',editor:new Ext.form.DateField({format:'Y-m-d'})}
然而在这个dateField在输入后日期格式却不正确
输入时：


输入后格式却变了：

二、解决了？
后来我Google了一下，看到有人说datefield定义时应该设置renderer函数，
应该把column model改成这样：
{header:'生产日期',dataIndex:'p_date',renderer:Ext.util.Format.dateRenderer('Y-m-d'),editor:new Ext.form.DateField({format:'Y-m-d'})}
我猜测EditorGridPanel在实现可编辑功能的方法应该是，在单元格中插入一个输入框，用户输入后再获取这个输入框中的值，然后调用renderer函数，再把返回值插入到单元格中。

三、不对

此时界面上的问题解决了，可是在服务器上接收到的日期依然是刚开始的那种英文格式，问题还是没有解决。
我就去查看了我写的在EditorGridPanel 的事件响应函数获取日期的代码：
grid.on('afteredit',function(event){
    var date = event.value;
    .....
}
我意识到这个event.value的值应该是date类型的，在发送到服务器上之前应该转化成正确的字符串格式，
于是我把代码改成下面这样：
grid.on('afteredit',function(event){
    var date = event.value.format("Y-m-d");
    .....
}

四、还是不对

此时服务器上接收到的日期正确了，但是从服务器接收到的日期还是不正确：


不用说，这肯定是renderer函数的返回值了，
从服务器接收来的是字符串,调用renderer函数自然不能获得正确的值了。

五、搞定

在这里我要重新编写一个renderer函数，传入字符串格式的date和Date类型时都能返回正确的值
function dateRender(value){
  if(typeof value == "string"){
   return value;
  }
  return value.format("Y-m-d");
}
column model改成
{header:'生产日期',dataIndex:'p_date',renderer:dateRender,editor:new Ext.form.DateField({format:'Y-m-d'})}

六、都对了
需要格式转换的地方很多，我们再回想一下，发现无非就是Date 和String之间的转换，应该是通过toString方法进行转换的。
由此前面难看的英文日期格式应该就是Date的toString方法返回的值了，
一不做二不休，我们把Date的toString方法改一下：
Date.prototype.toString=function(){
  return this.format("Y-m-d");
};
这样前面的工作都白做了，
表格的事件响应函数恢复原样：
grid.on('afteredit',function(event){
    var date = event.value;
    .....
}
前面写的dateRender函数也不需要了，
column model 定义成：
{header:'生产日期',dataIndex:'p_date',editor:new Ext.form.DateField({format:'Y-m-d'})}
甚至:
{header:'生产日期',dataIndex:'p_date',editor:new Ext.form.DateField()} 也可以。