EXTJS項目實戰經驗總結一：日期組件的change事件：

標籤：blog   http   java   color   使用   strong   

1  依據選擇的日期，載入相應的列表資料，

      

 

開發說明

   1 開發思路： 在日期值變化的事件中獲得選擇後的日期值，傳給後台，然後從後台載入相應的資料

 

    2 問題：在查看extjs2.2 的api的官方說明文檔，文檔對datefield組件的change事件說明如下：

       change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
       Fires just before the field blurs if the field value has changed.

       這句話是說值發生變化，並且在失去焦點之前觸發此事件，也就是說如果此日期組件的值發生變化，而焦點並沒有失去，這個事件也就不會觸發。通過我們的程式驗證，事實也的確如此。我們需要值發生變化就要觸發相應的事件。

    3 解決方案：

       從源頭找事件：是使用者點擊相應的日期，才導致文字框裡的值發生變換。可以捕獲這個點擊選擇事件，通過這個事件我們得到日期值，傳給後台，載入列表資料

    4 具體做法：

       繼承Ext.form.DateField，覆蓋menuListeners這個私人監聽器屬性，封裝類如下：

     

Java代碼 

1. Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {   
2.     // private   
3.     readOnly: true,   
4.     setValueFn:null,   
5.     menuListeners : {   
6.         select: function(m, d){   
7.             this.setValue(d);   
8.             if(this.setValueFn)   
9.                this.setValueFn.call(this,this.formatDate(this.parseDate(d)));   
10.         },   
11.         show : function(){   
12.             this.onFocus();   
13.         },   
14.         hide : function(){   
15.             this.focus.defer(10, this);   
16.             var ml = this.menuListeners;   
17.             this.menu.un("select", ml.select,  this);   
18.             this.menu.un("show", ml.show,  this);   
19.             this.menu.un("hide", ml.hide,  this);   
20.         }   
21.     }   
22. });   
23. Ext.reg(‘customDateField‘, Ext.form.CustomDateField);  

[java] view plaincopy

1. Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {  
2.     // private  
3.     readOnly: true,  
4.     setValueFn:null,  
5.     menuListeners : {  
6.         select: function(m, d){  
7.             this.setValue(d);  
8.             if(this.setValueFn)  
9.                this.setValueFn.call(this,this.formatDate(this.parseDate(d)));  
10.         },  
11.         show : function(){  
12.             this.onFocus();  
13.         },  
14.         hide : function(){  
15.             this.focus.defer(10, this);  
16.             var ml = this.menuListeners;  
17.             this.menu.un("select", ml.select,  this);  
18.             this.menu.un("show", ml.show,  this);  
19.             this.menu.un("hide", ml.hide,  this);  
20.         }  
21.     }  
22. });  
23. Ext.reg(‘customDateField‘, Ext.form.CustomDateField);  

 

 

 

 

      5 使用這個自訂的組件：

        

        例：

    

Java代碼 

1. {   
2.                 fieldLabel : ‘計劃開始日期‘,   
3.                 vtype : ‘isBlank‘,   
4.                 xtype : ‘datefield‘,   
5.                 xtype : ‘customDateField‘,   
6.                 setValueFn:function(value){   
7.                     alert(value);   
8.                 },   
9.                 format : ‘Y-m-d‘  
10.             }  

[java] view plaincopy

1. {  
2.                 fieldLabel : ‘計劃開始日期‘,  
3.                 vtype : ‘isBlank‘,  
4.                 xtype : ‘datefield‘,  
5.                 xtype : ‘customDateField‘,  
6.                 setValueFn:function(value){  
7.                     alert(value);  
8.                 },  
9.                 format : ‘Y-m-d‘  
10.             }  

 

 

 

  這種方法不好的地方，就是覆蓋了extjs提供的私人屬性menuListeners，不知路過的朋友，有沒有比較好的解決辦法