在Ext的应用中,我们常用到要按照日期区间进行查询,通常的做法是写两个日期组件进行成布局来实现,我觉得这样做虽然功能是实现了,但是用户体验不够好,与是编写了如下的日期区间选择组件,代码如下:
/**
* 日期区间查询组件
* @class Ext.form.uxDateAreaField
* @extends Ext.Container
*/
Ext.form.uxDateAreaField = Ext.extend(Ext.Container,{
single : true,//是否只提交一个参数
paramName : [null,null],
format : 'Y-m-d',//日期格式化
separator : ',',//是一个参数提交时,两个日期之间扮隔符
allowBlank : true,
disabled : false,
blankText : '开始日期与结束日期不能为空',
msgTarget : 'qtip',//提示信息的样式
invalidText : '开始日期不能大于结束日期',
invalidClass : 'x-form-invalid',
disabledClass : 'x-item-disabled',
preventMark : false,//true阻止组件被标记为不可用
//private
cls : 'x-form-text x-form-field',
//private
isFormField : true,
//private
activeField : null,
initComponent : function(){
Ext.form.uxDateAreaField.superclass.initComponent.call(this);
this.startName = this.single?null:(this.paramName[0] || (this.name + 'Start'));
this.endName = this.single?null:(this.paramName[1] || (this.name + 'End'));
this.menu = new Ext.menu.DateMenu({
scope : this,
handler : function(picker,date){
if(!Ext.isEmpty(this.activeField)){
this.activeField.setValue(date.format(this.format));
var b = this.validateValue();
if(b && !Ext.isEmpty(this.hiddenField)){
this.hiddenField.setValue(this.getValue());
}
}
}
});
//起始日期
this.startField = new Ext.form.TextField({
style : 'border:none;text-align:center;margin-left:-3px;',
cls : 'ux-datearea-field',
name : this.startName,
disabled : this.disabled,
listeners : {
scope : this,
'focus' : function(field){
this.activeField = field;
this.addClass('x-form-focus');
this.menu.show(field.el, "tl-bl?");
},
'blur' : function(){
this.removeClass('x-form-focus');
this.validateValue();
},
'render' : function(field){
field.removeClass('x-form-text');
if(this.single/* || Ext.isEmpty(this.name)*/){
field.el.dom.name = null;
}else{
this.remove(this.hiddenField);
}
}
}
});
//显示的分隔符
this.displayField = new Ext.form.DisplayField({
cls : 'ux-datearea-field',
style : 'padding-top: 3px;line-height:normal;',
width : 16,
value : '到'
});
this.endField = this.startField.cloneConfig({
name : this.endName
});
this.hiddenField = new Ext.form.Hidden({
ref : 'containerField',
name : this.name,
disabled : this.disabled
});
this.add(this.startField,this.displayField,this.endField,this.hiddenField);
this.setDisabled(this.disabled);
this.on('resize',function(){
this.fixWidth();
this.el.setStyle({
'padding-top' : '0px',
'height' : Ext.isIE?'22px':'21px'
});
},this);
},
disable : function(){
if(this.rendered){
this.addClass(this.disabledClass);
this.startField.disable();
this.endField.disable();
}
this.disabled = true;
return this;
},
enable : function(){
if(this.rendered){
this.removeClass(this.disabledClass);
this.startField.enable();
this.endField.enable();
}
this.disabled = false;
return this;
},
//private
validateValue : function(){
var startValue = this.startField.getValue();
var endValue = this.endField.getValue();
if(!Ext.isEmpty(startValue) && !Ext.isEmpty(endValue)){
if(startValue > endValue){
this.markInvalid();
return false;
}else{
this.clearInvalid();
return true;
}
}else if(!this.allowBlank){
this.markInvalid(this.blankText);
return false;
}
return true;
},
validate : function(){
if(!this.disabled){
return this.validateValue();
}
return true;
},
//private
fixWidth : function(){
var calcWidth = (this.el.getComputedWidth() - 24)/2;
this.startField.setWidth(calcWidth + 3);
this.endField.setWidth(calcWidth + 3);
},
//private
getMessageHandler : function(){
return Ext.form.MessageTargets[this.msgTarget];
},
//设置值
getValue : function(){
var start = this.startField.getValue();
var end = this.endField.getValue();
if(this.single){
return start + this.separator + end;
}else{
return [start,end];
}
},
//取值
setValue : function(v){
this.value = v;
if(this.rendered){
if(Ext.isEmpty(v)){
this.startField.setValue('');
this.endField.setValue('');
if(!this.allowBlank){
this.validateValue();
}
}else{
if(Ext.isString(v)){
var valueArray = v.split(this.separator);
this.startField.setValue(valueArray[0]);
this.endField.setValue(valueArray[1]);
}
if(Ext.isArray(v)){
this.startField.setValue(v[0]);
this.endField.setValue(v[1]);
}
if(Ext.isObject(v)){
this.startField.setValue(v[this.startName]);
this.endField.setValue(v[this.endName]);
}
}
this.validateValue();
}
return this;
},
markInvalid : function(msg){
if (this.rendered && !this.preventMark) {
msg = msg || this.invalidText;
var mt = this.getMessageHandler();
if(mt){
mt.mark(this, msg);
this.startField.addClass('ux-dataarea-invalid');
this.endField.addClass('ux-dataarea-invalid');
this.displayField.addClass('ux-dataarea-invalid');
}else if(this.msgTarget){
this.el.addClass(this.invalidClass);
this.startField.addClass('ux-dataarea-invalid');
this.endField.addClass('ux-dataarea-invalid');
this.displayField.addClass('ux-dataarea-invalid');
var t = Ext.getDom(this.msgTarget);
if(t){
t.innerHTML = msg;
t.style.display = this.msgDisplay;
}
}
}
},
afterRender : function(){
Ext.form.uxDateAreaField.superclass.afterRender.call(this);
// this.initEvents();
this.initValue();
if(!this.single){
this.remove(this.hiddenField);
}
},
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}else /*if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText)*/{
this.setValue('');
}
this.originalValue = this.getValue();
},
reset : function(){
this.setValue(this.originalValue);
this.clearInvalid();
},
clearInvalid : function(){
if (this.rendered && !this.preventMark) {
this.el.removeClass(this.invalidClass);
this.startField.removeClass('ux-dataarea-invalid');
this.endField.removeClass('ux-dataarea-invalid');
this.displayField.removeClass('ux-dataarea-invalid');
var mt = this.getMessageHandler();
if(mt){
mt.clear(this);
}else if(this.msgTarget){
this.el.removeClass(this.invalidClass);
this.startField.removeClass('ux-dataarea-invalid');
this.endField.removeClass('ux-dataarea-invalid');
this.displayField.removeClass('ux-dataarea-invalid');
var t = Ext.getDom(this.msgTarget);
if(t){
t.innerHTML = '';
t.style.display = 'none';
}
}
}
},
getName : function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || '';
},
getErrorCt : function(){
return this.el.findParent('.x-form-element', 5, true) ||
this.el.findParent('.x-form-field-wrap', 5, true);
},
// Alignment for 'under' target
alignErrorEl : function(){
this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20);
},
// Alignment for 'side' target
alignErrorIcon : function(){
this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
}
});
Ext.reg('dateareafield',Ext.form.uxDateAreaField);
要用到的样式为:
.ux-datearea-field{
float:left;
background-color: #FFFFFF;
text-align:center;
padding-top: 4px;
background-image: url("../js/ext/resources/images/default/form/text-bg.gif");
}
.ux-dataarea-invalid{
background-color:#fbeced;
background-image: url("");
}
图片文件在附件中
实现的效果请参考附件中的图片
说明:大家可以把组件进行提取,再此基础上再进行扩展,可以实现几乎所有的区间类查询
为了便于操作,有一个配置项single,这个配置项的作用是控制提交表单时是提交一个参数还是提交两个参数,当提交一个参数时,这两个日期的值以一个分隔符分隔,当以两个参数提交时就如同其它组件一样
- 大小: 6 KB
- 大小: 819 Bytes
分享到:
相关推荐
NULL 博文链接:https://myjoan.iteye.com/blog/587286
Ext 组件:Ext初学者必备 初学宝典 Ext组件概述
xtype Class box Ext.BoxComponent 具有边框属性的组件 Button Ext.Button 按钮 colorpalette Ext.ColorPalette 调色板 component Ext.Component 组件 container Ext.Container 容器
Ext2.0组件,全组件和帮助手册,部分为中文帮助手册
1. 这个组件基于Ext4 只选择年份/月份的组件,在Ext4.1.1版本正常,但在Ext4.2.1只显示了10个月份少了俩月,在其他的Ext4版本还未测过,你可以试一下,有问题小纸条我[天王盖地虎],咱们一起解决。 2. 该组件最初...
Ext、Ext4中各个组件、属性、方法详解,一个不漏;Ext学习入门及参考最好的资料
NULL 博文链接:https://babydeed.iteye.com/blog/1473498
Ext2.0.2经典的一个JS组件带EXT中文手册.rar
Ext中表单中各种组件的布局,例如TextField,Combox,还有DateField控件的基本使用
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
ext 4.0 日期选择控件 时分秒 中文版
环境:Windows XP sp3、Tomcat 6.0、IE 7、MyEclipse 5.5、Ext 3.2 使用步骤: 1、下载解压之后,使用IDE导入工程 2、发布到Web服务器、并且启动服务器 3、打开IE之后在地址输入:...
ext4.2 日历日期控件,可以选择时分秒
到也没什么特殊的 相反还有点丑 唯一的好处就是Extjs 5 0+也可以用 好吧 其实应该只有5 0以上才可以用 5的这个datepicker变了 so
Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性
Ext Calendar 是 ExtJS 的一个功能非常强大的日历显示组件,支持包括 IE、Firefox、Safari、Chrome 和 Opera 浏览器。 类结构图如下所示: 运行效果图如下: 标签:ExtCalendar
更改修正网络上带时间的日期选择代码,修改ext资源路径后可使用。
EXT 中文手册EXT 中文手册EXT 中文手册
1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题
自己第一次用Ext做的时间段选择控件,是参考公司了另一同事的控件修改的希望对大家有用。