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这个私有监听器属性,封装类如下:

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,不知路过的朋友,有没有比较好的解决办法

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

时间: 06-30

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

Extjs项目实战视频教程

深入浅出Extjs4.1.1(ExtJS组件.ExtJS对Ajax支持.ExtJS布局)配在线选课系统实战 适合人群:初级 课时数量:40课时 用到技术:ExtJS组件.ExtJS对Ajax支持.ExtJS布局 涉及项目:在线选课系统实战 咨询qq:1840215592 课程简介: ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解Extjs的课程.课程从基础开始,配合项目实战应用,让用户在最短的时间内掌握E

APP开发流程(项目实战经验)

不专业的人总喜欢站在专业的角度指挥专业的人,导致创业小BOSS输在了权力的虚荣之上. 从业以来,对两年的APP开发失败与成功经验总结,写此文章给行业创业者.遇到很多固执的创业BOSS坚持己见,认为做好视觉设计就可以为自己带来用户量.等到产品出问题的时候,已经没有资金支撑接下来的运营. 要点:真对忽视产品需求.产品原型确立.直接进入视觉设计的开发者们! 1.确立产品原型,进入项目评估阶段.经过反复确认,最终形成产品基本框架和完整的需求文档.(项目市场分析调研确立的前提下) 2.正式进入产品原型设计

ssh项目实战经验总结-在bean配置中加载外部的properties配置项

spring配置文件中有些需要改动的配置,为了方便维护和管理,我们把这一部分配置单独的写到properties中. db.properties文件 jdbcUrl=jdbc:mysql:///govSys driverClass=com.mysql.jdbc.Driver user=root password=33269456.cx initialPoolSize=10 maxPoolSize=30 spring配置文件 <?xml version="1.0" encoding=

OKHttp3的使用,自己项目实战经验

okhttp3.0网上的资料太少啦,今天我来为大家写一篇okhttp3.0的使用 okhttp3.0中引入啦大量的builder 1.创建OkHttpClient的builder private static final okhttp3.OkHttpClient.Builder builder = new OkHttpClient.Builder(); 2.创建OkHttpClient的实例 设置超时时间    设置cookies缓存 mOkHttpClient=builder.connectT

【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次

ExtJs的UI组件主要模仿客户端的界面效果,甚至其编程方式都有类似之处. 一.基本目标 比如如下的组件,与VC6中的<[mfc]不同对话框之间互相操控.全局变量与日期控件>(点击打开链接)就有异曲同工之妙. 其基本的思想也是先设置两个日期组件与按钮组件,然后,在点击按钮,就触发事件. 二.制作过程 首先,这个网页全程运用ExtJs编程,因此基本的HTML布局,处理引入ExtJS资源之外什么都没有.甚至可以把下面的ExtJs脚本完全写在一个Js里面. <!DOCTYPE HTML PUB

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

Android项目实战(二十九):酒店预定日期选择

原文:Android项目实战(二十九):酒店预定日期选择 先看需求效果图:              几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果"开始日期" "结束日期" 相同  (2).如果"开始日期" "结束日期" 不同,且"结束日期" 晚于 "开始日期&quo

前端全栈架构,组件式开发,响应式开发,全栈工程师架构,用户界面架构,企业级架构项目实战

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS.Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地.用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在.当然了WordPress作为全球用户量最广的开源博客程序,易用性等诸多好处无可厚非,光自己的博客在过去几年就用了很多套模板,也用它做过很

Spark大型项目实战:电商用户行为分析大数据平台

本项目主要讲解了一套应用于互联网电商企业中,使用Java.Spark等技术开发的大数据统计分析平台,对电商网站的各种用户行为(访问行为.页面跳转行为.购物行为.广告点击行为等)进行复杂的分析.用统计分析出来的数据,辅助公司中的PM(产品经理).数据分析师以及管理人员分析现有产品的情况,并根据用户行为分析结果持续改进产品的设计,以及调整公司的战略和业务.最终达到用大数据技术来帮助提升公司的业绩.营业额以及市场占有率的目标. 1.课程研发环境 开发工具: Eclipse Linux:CentOS 6