ExtJs 基于ExtJs2.2以上的日期时间选择控件datetimefield

最新推荐文章于 2020-04-10 14:31:29 发布

对信仰的忠诚

最新推荐文章于 2020-04-10 14:31:29 发布

阅读量3.7k

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/u010371458/article/details/8989024

版权

这篇博客介绍了如何在ExtJs中创建一个基于2.2以上版本的日期时间选择控件datetimefield，包括源码实现和配置方法。作者分享了一个适用于2.0以上版本的datetimefield，包含小时、分钟和秒的spinner，能够处理边界值。控件还提供了禁用、只读状态的管理以及验证功能。

摘要由CSDN通过智能技术生成

自己收集了一个ExtJs的日期时间选择空间，网上流传了很多版本，自己做了一点改，我的3.4版本的项目中使用都还正常。

这个适用于2.0以上的版本。以下是源码。

Ext.ns('Ext.ux.form');
Ext.ux.form.TimePickerField = function(config){
Ext.ux.form.TimePickerField.superclass.constructor.call(this, config);
}
Ext.extend(Ext.ux.form.TimePickerField, Ext.form.Field, {
defaultAutoCreate: {
tag: 'div'
},
cls: 'x-form-timepickerfield',
hoursSpinner: null,
minutesSpinner: null,
secondsSpinner: null,
spinnerCfg: {
width: 40
},

spinnerFixBoundries: function(value){
if (value < this.field.minValue) { //如果超过59那么秒数归零
value = this.field.maxValue;
}
if (value > this.field.maxValue) {
value = this.field.minValue;
}
return this.fixPrecision(value);
},
onRender: function(ct, position){
Ext.ux.form.TimePickerField.superclass.onRender.call(this, ct, position);
this.rendered = false;
this.date = new Date();
var values = {};
if (this.value) {
values = this._valueSplit(this.value);
this.date.setHours(values.h);
this.date.setMinutes(values.m);
this.date.setSeconds(values.s);
delete this.value;
}
else {
values = {
h: this.date.getHours(),
m: this.date.getMinutes(),
s: this.date.getSeconds()
};
}
var spinnerWrap = Ext.DomHelper.append(this.el, {
tag: 'div'
});
var cfg = Ext.apply({}, this.spinnerCfg, {
renderTo: spinnerWrap,
readOnly: this.readOnly,
disabled: this.disabled,
listeners: {
spin: {
fn: this.onSpinnerChange,
scope: this
},
valid: {
fn: this.onSpinnerChange,
scope: this
},
afterrender: {
fn: function(spinner){
spinner.wrap.applyStyles('float: left');
},
single: true
}
}
});
this.hoursSpinner = new Ext.ux.form.SpinnerField(Ext.apply({}, cfg, {
minValue: 0,
maxValue: 23,
cls: 'first',
value: values.h
}));
this.minutesSpinner = new Ext.ux.form.SpinnerField(Ext.apply({}, cfg, {
minValue: 0,
maxValue: 59,
value: values.m
}));
this.secondsSp