ExtJs中處理時間，出現NaN-NaN-NaN的解決方式

Extjs日期格式問題(二)

關鍵字: extjs日期格式問題(二)

一般我們的前台代碼Ext.grid.ColumnModel裡會這樣寫，以便顯示日期格式：

Js代碼

1.....  

2.{header:"birthday",dataIndex:"birthday".......renderer:new Ext.util.Format.dateRenderer("Y-m-d"),  

3..... 

....

{header:"birthday",dataIndex:"birthday".......renderer:new Ext.util.Format.dateRenderer("Y-m-d"),

....

如果你前台這樣寫的話，那恭喜你，你的顯示日期那列将不再正确顯示時間，而是顯示為"NaN-NaN-NaN"，是吧？呵呵，問我怎麼知道的？因為最開始我也是這麼錯的。 為什麼會是錯的呢？讓我們來看看Ext.format.dateRenderer的源代碼（開源的東西就是好），它的源代碼是這樣的：

Js代碼

1.dateRenderer : function(format) {  

2.    return function(v) {  

3.        return Ext.util.Format.date(v, format);、  

4.    }  

5.} 

dateRenderer : function(format) {

return function(v) {

return Ext.util.Format.date(v, format);、

}

} 可以看出，我們傳會來的值，被當做日期又被格式化了一次，我們傳回來的是日期嗎？以前是，經過昨天背景代碼的修改，我們傳回來的僅僅是個字元串了，至于為什麼要這麼改，請看昨天寫的“Extjs日期格式問題(一) ”，那咋辦？有的朋友應該已經想到了，既然是字元串，那就直接顯示呗，不用renderer了，于是前台代碼Ext.grid.ColumnModel裡就變成了：

Js代碼

1.....  

2.{header:"birthday",dataIndex:"birthday".......),  

3..... 

....

{header:"birthday",dataIndex:"birthday".......),

....可以負責任的告訴你，這樣寫，絕對可以正确顯示了，這樣是不是感覺更簡單了呢？

但是，基于我項目裡的要求，這個問題并沒有解決完，因為在這裡不是一個簡單的gridpanel，而是一個editgridpanel，是以還得定義一個editor，于是有了下面這樣一段代碼：

Js代碼

1.....  

2.{header:"birthday",dataIndex:"birthday".......，  

3.      editor:new Ext.grid.GridEditor(new Ext.form.DateField({format:"Y-m-d"})),  

4..... 

....

{header:"birthday",dataIndex:"birthday".......，

      editor:new Ext.grid.GridEditor(new Ext.form.DateField({format:"Y-m-d"})),

....加了這個DateField控件後，每次可以正常的選擇日期，但是選擇完日期後，grid裡顯示的格式就又不正确了，這次顯示的内容成了： "Wed Mar 04 1970......"，這樣的格式一看就是個日期，這樣顯示的原因當然是因為我們沒有寫renderer進行格式化處理的緣故。。。

說到這裡，有人應該已經想到解決辦法了，另外有些人可能就抓狂了，這renderer加了不能正常顯示，不加也不能正常顯示，這很沖突啊。。

問題往往到了最沖突的時候，也是到了解決的時候，現在我把解決代碼貼出來，大家一看就明白了。多的不說，看代碼：

Js代碼

1.renderer:function(value){  

2.    if(value instanceof Date){  

3.        return new Date(value).format("Y-m-d");  

4.    }else{  

5.        return value;  

6.    }  

7.} 

renderer:function(value){

if(value instanceof Date){

return new Date(value).format("Y-m-d");

}else{

return value;

}

} 簡單吧？自己寫renderer就是了。。