ExtJS EditorGridPanel 中 時間日期 編輯 問題的總結

http://www.iteye.com/topic/474801

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'  
      })  
    }]  
  })  
}