ExtJS EditorGridPanel中时间日期编辑问题的总结

老是被反复问到这个问题,烦了...总结下...

 

1.首先要确保你store中的field是成功的把时间字符串转换为date类型

2.正确的设置grid的renderer以便呈现

3.正确的设置editor的format

4.关于格式化的方式,看ext api中Date的那篇,很详细.

 

截图如下:

代码如下:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/js/extjs/3.0/resources/images/default/s.gif';
  //Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';
  Ext.QuickTips.init();
  testEditorGrid();
});

function testEditorGrid(){
  var store = new Ext.data.SimpleStore({
	  fields:[
      //先把json中的时间格式化为date格式
	    {name:'time1',type:'date',dateFormat:'Y-m-d H:i:s'},//对应于2009-10-20 10:00:00
	    {name:'time2',type:'date',dateFormat:'Y-m-d'},//对应于2009-10-20
	    {name:'time3',type:'date',dateFormat:'y-m-d'},//对应于09-10-20
	    {name:'time4',type:'date',dateFormat:'m/d/y'},//对应于10/20/09
        {name:'time5',type:'date',convert:function(v,r){return new Date(r.time5);}} //对应于1293901323000
	  ],
	  data:[
	    ['2009-10-20 10:00:00','2009-10-20','09-10-20','10/20/09',1293901323000]
	  ],
    listeners:{
      'load':function(store,records,options){
        //出了问题的时候,先检查json格式是否正确转换为date
        var r = store.getAt(0);
        var validDate = Ext.isDate(r.get('time1')) && Ext.isDate(r.get('time2')) && Ext.isDate(r.get('time3')) && Ext.isDate(r.get('time4'));
        Ext.Msg.alert('提示','1.在Store里面格式化'+(validDate?'正确!':'错误!'));
      }
    }
	});
  
  var grid = new Ext.grid.EditorGridPanel({
    width: 400,
    height: 200,
    renderTo:Ext.getBody(),
    sm:new Ext.grid.RowSelectionModel({}),
    viewConfig:{forceFit:true},
    store:store,
    columns: [{
      header: '时间1', 
      dataIndex: 'time1',
      //显示在grid上的格式,这里格式化为2009-10-20的格式
      renderer:Ext.util.Format.dateRenderer('Y-m-d'),
      editor:new Ext.form.DateField({
		    //在编辑器里面显示的格式,这里为09-10-20的格式
		    format: 'y-m-d'
		  })
    },{
      header: '时间2', 
      dataIndex: 'time2',
      //显示在grid上的格式,这里格式化为09/10/20的格式
      renderer:Ext.util.Format.dateRenderer('y/m/d'),
      editor:new Ext.form.DateField({
		    //在编辑器里面显示的格式,这里为10/20/09的格式
		    format: 'm/d/y'
		  })
    },{
      header: '时间3', 
      dataIndex: 'time3',
      //显示在grid上的格式,这里格式化为09-10-20 00:00:00的格式
      renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),
      editor:new Ext.form.DateField({
        //在编辑器里面显示的格式,这里为2009-10-20的格式
        format: 'Y-m-d'
      })
    },{
      header: '时间4', 
      dataIndex: 'time4',
      //显示在grid上的格式,这里格式化为09年10月20日的格式
      renderer:Ext.util.Format.dateRenderer('y年m月d日'),
      editor:new Ext.form.DateField({
        //在编辑器里面显示的格式,这里为09.10.20的格式
        format: 'y.m.d'
      })
    }]
  })
}

呵呵 前些日子我遇到类似功能了 例如输 1/5, 1-5 ... 等都要转成 mmm dd yy的 不过我偷懒了 日期对不对都交给后台了 要不太麻烦 (说的是 2月假如 输了 31号)那种情况  不知道 ext 实现我说的这功能没

啥意思?你想在DateField任意输入后,自动转换? 那就自己修改下DateField的相关方法咯,应该不难,看看源码即知,

天猪，我来捧你的场了哈。
另外，关于日期格式，大家可以去我的博客看一下《Extjs日期格式问题》一和二

冲第一条
1.首先要确保你store中的field是成功的把时间字符串转换为date类型

服务器返回的数据如下
"roleLimits":"11111111111111111111111111111111"},"recId":1,"idx":null,"shopId":7,"loginName":"admin","passwd":"21232f297a57a5a743894a0e4a801fc3","secPasswdTip":null,"secPasswd":null,"deptName":null,"positionName":null,"validTime":1293901323000,"lastLoginTime":1279165615000,"lastLoginIp":"127.0.0.1","loginCount":77,"createTime":1274405926000
里面"validTime":1293901323000"

因为不是Date类型，所以
即使加上renderer : Ext.util.Format.dateRenderer('Y-m-d')
页面还是输出 NaN-NaN-NaN

	var store = new Ext.data.JsonStore({ // 定义数据源为远程代理和JSON数据格式
		url : 'user/list.json',
		root : "userList",
		totalProperty : 'userCount',
		fields : ["recId", "loginName", "userName", "role.roleName",
			"validTime","enabled","shopId"]
	});

这里如何转换validTime，还是说在后台转换

TO pizza823: 用

{
  name:'validTime',
  type:'date',
  convert:function(v,r){
    return new Date(r.validTime);
  }
}, 

TO whaosoft: 用altFormats属性

thanks a lot

分享下另外中方法
store里面不用变
在列模型里面
renderer:formatDate

	// 格式化日期
	function formatDate(value) {
		if (Ext.isEmpty(value)) {//判断是否是日期类型的数据
			return '';
		} else {
			if (Ext.isDate(value))
				return Ext.util.Format.date(value, 'Y-m-d');// 用于时间控件返回值
			else
				return Ext.util.Format.date(new Date(value), 'Y-m-d');// 转换为Date类型
		}
	}