Extjs DateField onchange

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);

  5 使用这个自定义的组件:

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

 

 

 

posted @ 2013-09-28 21:44 残星 阅读(...) 评论(...) 编辑 收藏