EXTJS项目实战经验总结一:日期组件的change事件:

1  依据选择的日期,加载相应的列表数据,如图:

      
EXTJS项目实战经验总结一:日期组件的change事件:
 

开发说明

   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代码 EXTJS项目实战经验总结一:日期组件的change事件:
  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代码 EXTJS项目实战经验总结一:日期组件的change事件:
  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,不知路过的朋友,有没有比较好的解决办法

EXTJS项目实战经验总结一:日期组件的change事件:,布布扣,bubuko.com

EXTJS项目实战经验总结一:日期组件的change事件:

上一篇:JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传


下一篇:React中refs持久化