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

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'

})

}]

})

}

或者

{header:"时间",dataIndex:"",renderer:function(v){
return
return Ext.util.Format.date(v,
'Y-m-d');}}