(转)扩展EXT时间控件，可以选择到时分秒

最新推荐文章于 2015-08-20 20:47:00 发布

转载最新推荐文章于 2015-08-20 20:47:00 发布 · 2.8k 阅读

文章标签：

#扩展 #ext #function #date #autocomplete #null

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文介绍了一种基于ExtJS框架的时间和日期选择组件的实现方法。该组件结合了时间选择器与日期选择器的功能，允许用户同时选择具体的时间点和日期。通过自定义TimePickerField和DateTimePickerField类，实现了小时、分钟、秒的选择，并提供了相应的验证和事件处理功能。

转自：http://www.javaeye.com/topic/599887

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) { 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.secondsSpinner=new Ext.ux.form.SpinnerField( Ext.apply({}, cfg, { minValue: 0, maxValue: 59, value: values.s }) ); Ext.DomHelper.append(spinnerWrap, {tag: 'div', cls: 'x-form-clear-left'}); this.rendered=true; }, _valueSplit: function(v) { var split=v.split(':'); return { h: split.length>0 ? split[0] : 0, m: split.length>1 ? split[1] : 0, s: split.length>2 ? split[2] : 0 }; }, onSpinnerChange: function() { if(!this.rendered) { return; } this.fireEvent('change', this, this.getRawValue()); }, disable: function() { Ext.ux.form.TimePickerField.superclass.disable.call(this); this.hoursSpinner.disable(); this.minutesSpinner.disable(); this.secondsSpinner.disable(); }, enable: function() { Ext.ux.form.TimePickerField.superclass.enable.call(this); this.hoursSpinner.enable(); this.minutesSpinner.enable(); this.secondsSpinner.enable(); }, setReadOnly: function(r) { Ext.ux.form.TimePickerField.superclass.setReadOnly.call(this, r); this.hoursSpinner.setReadOnly(r); this.minutesSpinner.setReadOnly(r); this.secondsSpinner.setReadOnly(r); }, clearInvalid: function() { Ext.ux.form.TimePickerField.superclass.clearInvalid.call(this); this.hoursSpinner.clearInvalid(); this.minutesSpinner.clearInvalid(); this.secondsSpinner.clearInvalid(); }, getRawValue: function() { if(!this.hoursSpinner){ this.date=new Date(); return {h:this.date.getHours(), m:this.date.getMinutes(), s:this.date.getSeconds()}; }else{ return { h: this.hoursSpinner.getValue(), m: this.minutesSpinner.getValue(), s: this.secondsSpinner.getValue() }; } }, setRawValue: function(v) { this.hoursSpinner.setValue(v.h); this.minutesSpinner.setValue(v.m); this.secondsSpinner.setValue(v.s); }, isValid: function(preventMark) { return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark) && this.secondsSpinner.isValid(preventMark); }, validate: function() { return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate(); }, getValue: function() { var v=this.getRawValue(); return String.leftPad(v.h, 2, '0')+':'+ String.leftPad(v.m, 2, '0')+':'+ String.leftPad(v.s, 2, '0'); }, setValue: function(value) { if(!this.rendered) { this.value=value; return; } value=this._valueSplit(value); this.setRawValue(value); this.validate(); } }); Ext.form.TimePickerField=Ext.ux.form.TimePickerField; Ext.reg('timepickerfield', Ext.form.TimePickerField); Ext.ns('Ext.ux.form'); Ext.DateTimePicker = Ext.extend(Ext.DatePicker, { timeFormat:'g:i:s A', timeLabel:'时间', timeWidth:100, initComponent:function() { Ext.DateTimePicker.superclass.initComponent.call(this); this.id = Ext.id(); }, onRender: function(container,position){ Ext.DateTimePicker.superclass.onRender.apply(this,arguments); var table = Ext.get(Ext.DomQuery.selectNode('table tbody',container.dom)); var tfEl = Ext.DomHelper.insertBefore(table.last(),{tag:'tr', children:[{tag:'td',cls:'x-date-bottom',html:this.timeLabel,style:'width:30;'},{tag:'td',cls:'x-date-bottom ux-timefield', colspan:'2'}]},true); this.tf.render(table.child('td.ux-timefield')); var p=this.getEl().parent('div.x-layer'); if (p){ p.setStyle("height",p.getHeight()+31); } }, setValue : function(value){ var old = this.value; if (!this.tf){ this.tf = new Ext.ux.form.TimePickerField(); this.tf.ownerCt = this; } this.value = this.getDateTime(value); }, getDateTime: function(value){ if (this.tf){ var dt = new Date(); var timeval = this.tf.getValue(); value = Date.parseDate(value.format(this.dateFormat) + ' ' +this.tf.getValue(),this.format); } return value; }, selectToday : function(){ if(this.todayBtn && !this.todayBtn.disabled){ this.value=this.getDateTime(new Date()); this.fireEvent("select", this, this.value); } } }); Ext.reg('datetimepickerfield', Ext.DateTimePicker); if (parseInt(Ext.version.substr(0, 1), 10) > 2) { Ext.menu.DateTimeItem = Ext.DateTimePicker; Ext.override(Ext.menu.DateMenu,{ initComponent: function(){ this.on('beforeshow', this.onBeforeShow, this); if(this.strict = (Ext.isIE7 && Ext.isStrict)){ this.on('show', this.onShow, this, {single: true, delay: 20}); } Ext.apply(this, { plain: true, showSeparator: false, items: this.picker = new Ext.DatePicker(Ext.apply({ internalRender: this.strict || !Ext.isIE, ctCls: 'x-menu-date-item' }, this.initialConfig)) }); Ext.menu.DateMenu.superclass.initComponent.call(this); this.relayEvents(this.picker, ["select"]); this.on('select', this.menuHide, this); if(this.handler){ this.on('select', this.handler, this.scope || this); } } }); }else{ Ext.menu.DateTimeItem = function(config){ Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config); this.picker = this.component; this.addEvents('select'); this.picker.on("render", function(picker){ picker.getEl().swallowEvent("click"); picker.container.addClass("x-menu-date-item"); }); this.picker.on("select", this.onSelect, this); }; Ext.extend(Ext.menu.DateTimeItem, Ext.menu.DateMenu, { onSelect : function(picker, date){ this.fireEvent("select", this, date, picker); Ext.menu.DateTimeItem.superclass.handleClick.call(this); } }); } Ext.menu.DateTimeMenu = function(config){ Ext.menu.DateTimeMenu.superclass.constructor.call(this, config); this.plain = true; var di = new Ext.menu.DateTimeItem(config); this.add(di); this.picker = di; this.relayEvents(di, ["select"]); this.on('beforeshow', function(){ if(this.picker){ this.picker.hideMonthPicker(true); } }, this); }; Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, { cls:'x-date-menu', beforeDestroy : function() { this.picker.destroy(); }, hide : function(deep){ if (this.picker.tf.innerList){ if ((Ext.EventObject.within(this.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget())==this.picker.tf.innerList)) return false; } if(this.el && this.isVisible()){ this.fireEvent("beforehide", this); if(this.activeItem){ this.activeItem.deactivate(); this.activeItem = null; } this.el.hide(); this.hidden = true; this.fireEvent("hide", this); } if(deep === true && this.parentMenu){ this.parentMenu.hide(true); } } }); Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, { dateFormat: 'Y-m-d' ,timeFormat: 'H:i:s' ,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"} ,initComponent:function() { Ext.ux.form.DateTimeField.superclass.initComponent.call(this); this.format = this.dateFormat + ' ' + this.timeFormat; this.afterMethod('afterRender',function(){ this.getEl().applyStyles('top:0'); }); } ,getValue : function(){ return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || ''; } ,onTriggerClick : function(){ if(this.disabled){ return; } if(this.menu == null){ this.menu = new Ext.menu.DateTimeMenu(); } Ext.apply(this.menu.picker, { minDate : this.minValue, maxDate : this.maxValue, disabledDatesRE : this.ddMatch, disabledDatesText : this.disabledDatesText, disabledDays : this.disabledDays, disabledDaysText : this.disabledDaysText, format : this.format, timeFormat: this.timeFormat, dateFormat: this.dateFormat, showToday : this.showToday, minText : String.format(this.minText, this.formatDate(this.minValue)), maxText : String.format(this.maxText, this.formatDate(this.maxValue)) }); if (this.menuEvents) { this.menuEvents('on'); } else { this.menu.on(Ext.apply({}, this.menuListeners, { scope:this })); } this.menu.picker.setValue(this.getValue() || new Date()); this.menu.show(this.el, "tl-bl?"); } }); Ext.reg('datetimefield', Ext.ux.form.DateTimeField);