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

 

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

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

3.正确的设置editor的format

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

 

截图如下:

代码如下:

Java代码  

1. Ext.onReady(function(){   
2.   Ext.BLANK_IMAGE_URL = '/js/extjs/3.0/resources/images/default/s.gif';   
3.   //Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';  
4.   Ext.QuickTips.init();   
5.   testEditorGrid();   
6. });   
7.   
8. function testEditorGrid(){   
9.   var store = new Ext.data.SimpleStore({   
10.       fields:[   
11.       //先把json中的时间格式化为date格式   
12.         {name:'time1',type:'date',dateFormat:'Y-m-d H:i:s'},//对应于2009-10-20 10:00:00  
13.         {name:'time2',type:'date',dateFormat:'Y-m-d'},//对应于2009-10-20  
14.         {name:'time3',type:'date',dateFormat:'y-m-d'},//对应于09-10-20  
15.         {name:'time4',type:'date',dateFormat:'m/d/y'},//对应于10/20/09  
16.         {name:'time5',type:'date',convert:function(v,r){return new Date(r.time5);}} //对应于1293901323000  
17.       ],   
18.       data:[   
19.         ['2009-10-20 10:00:00','2009-10-20','09-10-20','10/20/09',1293901323000]   
20.       ],   
21.     listeners:{   
22.       'load':function(store,records,options){   
23.         //出了问题的时候,先检查json格式是否正确转换为date   
24.         var r = store.getAt(0);   
25.         var validDate = Ext.isDate(r.get('time1')) && Ext.isDate(r.get('time2')) && Ext.isDate(r.get('time3')) && Ext.isDate(r.get('time4'));   
26.         Ext.Msg.alert('提示','1.在Store里面格式化'+(validDate?'正确!':'错误!'));   
27.       }   
28.     }   
29.     });   
30.      
31.   var grid = new Ext.grid.EditorGridPanel({   
32.     width: 400,   
33.     height: 200,   
34.     renderTo:Ext.getBody(),   
35.     sm:new Ext.grid.RowSelectionModel({}),   
36.     viewConfig:{forceFit:true},   
37.     store:store,   
38.     columns: [{   
39.       header: '时间1',    
40.       dataIndex: 'time1',   
41.       //显示在grid上的格式,这里格式化为2009-10-20的格式   
42.       renderer:Ext.util.Format.dateRenderer('Y-m-d'),   
43.       editor:new Ext.form.DateField({   
44.             //在编辑器里面显示的格式,这里为09-10-20的格式   
45.             format: 'y-m-d'  
46.           })   
47.     },{   
48.       header: '时间2',    
49.       dataIndex: 'time2',   
50.       //显示在grid上的格式,这里格式化为09/10/20的格式   
51.       renderer:Ext.util.Format.dateRenderer('y/m/d'),   
52.       editor:new Ext.form.DateField({   
53.             //在编辑器里面显示的格式,这里为10/20/09的格式   
54.             format: 'm/d/y'  
55.           })   
56.     },{   
57.       header: '时间3',    
58.       dataIndex: 'time3',   
59.       //显示在grid上的格式,这里格式化为09-10-20 00:00:00的格式  
60.       renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),   
61.       editor:new Ext.form.DateField({   
62.         //在编辑器里面显示的格式,这里为2009-10-20的格式   
63.         format: 'Y-m-d'  
64.       })   
65.     },{   
66.       header: '时间4',    
67.       dataIndex: 'time4',   
68.       //显示在grid上的格式,这里格式化为09年10月20日的格式   
69.       renderer:Ext.util.Format.dateRenderer('y年m月d日'),   
70.       editor:new Ext.form.DateField({   
71.         //在编辑器里面显示的格式,这里为09.10.20的格式   
72.         format: 'y.m.d'  
73.       })   
74.     }]   
75.   })   
76. }