需求说明:
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);
5 使用这个自定义的组件:
例:
{
fieldLabel : '计划开始日期',
vtype : 'isBlank',
xtype : 'datefield',
xtype : 'customDateField',
setValueFn:function(value){
alert(value);
},
format : 'Y-m-d'
}
这种方法不好的地方,就是覆盖了extjs提供的私有属性menuListeners,不知路过的朋友,有没有比较好的解决办法
- 大小: 49.5 KB
- 大小: 12 KB
分享到:
相关推荐
ExtJS 6.2 实战
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术: 1.ExtJs 常用控件使用 2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的...
用fieldcontainer封装一个日期和一个时间。日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式为横向的日期、时间,非日期弹出框下方选择时间。 注意事项:1、只有...
ExtJS开发实战 ExtJS开发实战 上传只能选资源分,没办法,我想免费分享的
extjs时间日期选择组件.
资源名称:ExtJS开发实战内容简介:《extjs开发实战》从extjs中最基本的概念开始,例如dom操作、面向对象、ponent/container模型的生命周期、组件管理等,并介绍如何使用项目开发中最常使用的各种组件,例如 panel...
ExtJS_4_官方指南:MVC架构_简体中文版归纳.pdf
有人说缺一个综合应用的例子,补发一个上来(ExtJs3.2综合应用的例子:云计算管理平台)。这个例子涉及到以下主题: 1.如何划分系统模块; 2.如何扩展组件; 3.基本组件Viewport、TreePanel、GridPanel用法。
Extjs项目之个人理财项目源码 Extjs项目实例
06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化代码 09.实现文章类别的选择、实现添加文章的后台功能 10.实现添加文章后台的功能、实现删除功能 11....
ExtJS_4_官方指南:MVC架构_简体中文版整理.pdf
extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等
ExtJS日期多选组件源码 日期一般是单选,有时间有需要选择多个日期的情况,返回一个日期的数组。
ExtJS项目 一个博客系统 ExtJS项目 一个博客系统
[Apress] Ext JS 项目实战 (Gears 实现) (英文版) [Apress] Practical Ext JS Projects with Gears (E-Book) ☆ 出版信息:☆ [作者信息] Frank Zammetti [出版机构] Apress [出版日期] 2009年07月08日 [图书...
ssh_extjs项目实例 三大框架 和extjs4
这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...