EditorGridPanel关于时间格式[GTM格式]的初始，编辑

    在EXT中经常会遇到时间格式的初始化，编辑，保存的情况，其中时间格式也有精确度不同。下面介绍一下工作中遇到的一点问题及解决方法：[用到的控件为DateTimeField,为一个扩展控件，可以去网上下，也可以在我的资源里找，可以精确到秒]

   如下图，是一个简单的EditorGridPanel，里面最后一列需要初始化一个时间格式的字段。

 

  按平时正常的写法应该如下：

  var sm = new Ext.grid.CheckboxSelectionModel(); sm.handleMouseDown=Ext.emptyFn; var store= new Ext.data.JsonStore({ url: 'xxx.aspx', root: 'data', autoLoad:true, fields: ['BMMC','ZXRY','LXDH1','DDSJ'] }); var menuCM = new Ext.grid.ColumnModel({ defaults: { sortable: false }, columns: [ sm, {header: "名称", width: 150, dataIndex: 'BMMC'}, {header: "执行人员", width: 60,dataIndex: 'ZXRY'}, {header: "办公电话", width: 125,dataIndex: 'LXDH1'}, {header: "到达时间", width: 125, dataIndex: 'DDSJ', renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), editor: new Ext.ux.form.DateTimeField({ format:'Y-m-d H:i:s', anchor:"99%" })} ] }); var menuGrid = new Ext.grid.EditorGridPanel({ border: true, frame: true, title:'测试', id:'menuGrid', renderTo:'Div', columnLines: true, clicksToEdit:1, store:store, cm: menuCM, sm:sm, width:500, height: 565, collapsible: false, animCollapse: false, });

或者是这样：

  var sm=new Ext.grid.CheckboxSelectionModel(); sm.handleMouseDown=Ext.emptyFn; var reader = new Ext.data.JsonReader({ idProperty:'ZJBH', fields: [ {name:'xxx', type:'xxx'}, {name:'DDSJ',type:'date'} ], root:'data' }); xxxxGrid= new Ext.grid.EditorGridPanel({ renderTo:'DIV', columns: [ sm, { id: 'xx', header: 'xx, width: 50, sortable: true, dataIndex: 'XM', hideable: false } ,{ id: 'DDSJ', header: '到达时间', width: 80, height:23, sortable: true, dataIndex: 'DDSJ', renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), editor: new Ext.ux.form.DateTimeField({ format:'Y-m-d H:i:s', anchor:"99%" }) } ], frame: true, columnLines: true, width: 500, height: 565, clicksToEdit: 1, }); xxxxGrid.getForm().load({url:'xxx'waitMsg:'Loading'});

这样的写法感觉应该没错，在ColunmModel里初始数据信息，时间格式的信息也会在renderer被格式化，但实际上显示的结果却并并不是时间格式的，而是“NaN-NaN-NaN”，这是为什么呢。原因如下：

  　让我们来看看Ext.format.dateRenderer的源代码：

   //
     dateRenderer : function(format) {   
      return function(v) {   
        return Ext.util.Format.date(v, format);、   
       }  
    } 

 

我们从后台传来的值[字符串又被格式化了一次]，因为传来的值已经是字符串格式，不是时间格式的，所有会出现此问题。

修改：如果只是单纯的显示的话，只需要把第二种方法中的Jsonreader中的字段的类型 type:'date' 修改成 type:'string'这样就可以了，可以正确的时间格式了。

但这是一个EditorGridPanel,还需要对时间进行编辑。选择了时间编辑器以后，如下图：

 选择完成之后，会显示如下格式的时间字段：Fri Aug 28 09:37:46 GMT + 0008[GMT时间格式]，这是因为在renderer的对时间进行格式化时候出现了问题，因为从后台的时候不需要格，从时间编辑器里传值的时候需要格，有一个矛盾的过程，其实修改一下renderer属性即可：

  renderer:function(value){  
                    if(value instanceof Date){  
                        return new Date(value).format("Y-m-d H:i:s");  
                    }else{  
                        return value;  
                    } 
                }

对传的值进行一下判断！~~然后确定需要不需要格。

备注：不知道为什么，显示时间格式是正确，往后台传值保存的时候，却又是GMT时间格式的，需要在后台对那个GMT时间格式的字符串进行一个判断格式为正确的时间格式（y:M:d hh:mi:ss）:

  //反UTC格式转换成DATETIME格式 public string GetDateTime(string str) { if (!string.IsNullOrEmpty(str) && str != "null" && str.IndexOf("U") != -1) { str = str.Replace("UTC ", "+"); CultureInfo cultureInfo = CultureInfo.CreateSpecificCulture("en-US"); string format = "ddd MMM d HH:mm:ss zz00 yyyy"; DateTime datetime = DateTime.ParseExact(str, format, cultureInfo); str = datetime.ToString(); } else { str = DateTime.Now.ToString(); } return str; }