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

需求說明：

        

   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這個私有監聽器屬性，封裝類如下：

     

Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {
    // private
    readOnly: true,
    setValueFn:null,
    menuListeners : {
        select: function(m, d){
            this.setValue(d);
            if(this.setValueFn)
               this.setValueFn.call(this,this.formatDate(this.parseDate(d)));
        },
        show : function(){
            this.onFocus();
        },
        hide : function(){
            this.focus.defer(10, this);
            var ml = this.menuListeners;
            this.menu.un("select", ml.select,  this);
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    }
});
Ext.reg('customDateField', Ext.form.CustomDateField);

Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {
    // private
    readOnly: true,
    setValueFn:null,
    menuListeners : {
        select: function(m, d){
            this.setValue(d);
            if(this.setValueFn)
               this.setValueFn.call(this,this.formatDate(this.parseDate(d)));
        },
        show : function(){
            this.onFocus();
        },
        hide : function(){
            this.focus.defer(10, this);
            var ml = this.menuListeners;
            this.menu.un("select", ml.select,  this);
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    }
});
Ext.reg('customDateField', Ext.form.CustomDateField);

 

 

 

 

      5 使用這個自定義的組件：

        

        例：

    

{
                fieldLabel : '計劃開始日期',
                vtype : 'isBlank',
                xtype : 'datefield',
                xtype : 'customDateField',
                setValueFn:function(value){
                    alert(value);
                },
                format : 'Y-m-d'
            }

{
				fieldLabel : '計劃開始日期',
				vtype : 'isBlank',
				xtype : 'datefield',
				xtype : 'customDateField',
				setValueFn:function(value){
					alert(value);
				},
				format : 'Y-m-d'
			}

 

 

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