Extjs4 日期+時分秒組件datetimefield

截止目前最新的Ext-4.2.1.883版本，分別提供日期組件xtype:'datefield'）和時間組件xtype:'timefield'）,卻沒有提供日期+時分秒組件。

搜尋到的牛人向外延展群組件代碼貼下：

1、將日期選取器datepicker組件擴充成日期時分秒選取器datetimepicker：

Ext.define('MyApp.ux.DateTimePicker', {      extend: 'Ext.picker.Date',      alias: 'widget.datetimepicker',      todayText: '現在',      timeLabel: '時間',      requires: ['MyApp.ux.TimePickerField'],      initComponent: function() {          // keep time part for value          var value = this.value || new Date();          this.callParent();          this.value = value;      },      onRender: function(container, position) {          if(!this.timefield) {              this.timefield = Ext.create('MyApp.ux.TimePickerField', {                    fieldLabel: this.timeLabel,                    labelWidth: 40,                    value: Ext.Date.format(this.value, 'H:i:s')                });          }          this.timefield.ownerCt = this;          this.timefield.on('change', this.timeChange, this);          this.callParent(arguments);          var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));          var tfEl = Ext.core.DomHelper.insertAfter(table, {                tag: 'div',                style: 'border:0px;',                children: [{                      tag: 'div',                      cls: 'x-datepicker-footer ux-timefield'                  }]            }, true);          this.timefield.render(this.el.child('div div.ux-timefield'));          var p = this.getEl().parent('div.x-layer');          if(p) {              p.setStyle("height", p.getHeight() + 31);          }      },      // listener 時間域修改, timefield change      timeChange: function(tf, time, rawtime) {          // if(!this.todayKeyListener) { // before render          this.value = this.fillDateTime(this.value);          // } else {          // this.setValue(this.value);          // }      },      // @private      fillDateTime: function(value) {          if(this.timefield) {              var rawtime = this.timefield.getRawValue();              value.setHours(rawtime.h);              value.setMinutes(rawtime.m);              value.setSeconds(rawtime.s);          }          return value;      },      // @private      changeTimeFiledValue: function(value) {          this.timefield.un('change', this.timeChange, this);          this.timefield.setValue(this.value);          this.timefield.on('change', this.timeChange, this);      },      /* TODO 時間值與輸入框綁定, 考慮: 建立this.timeValue 將日期和時間分開儲存. */      // overwrite      setValue: function(value) {          this.value = value;          this.changeTimeFiledValue(value);          return this.update(this.value);      },      // overwrite      getValue: function() {          return this.fillDateTime(this.value);      },      // overwrite : fill time before setValue      handleDateClick: function(e, t) {          var me = this,              handler = me.handler;          e.stopEvent();          if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {              me.doCancelFocus = me.focusOnSelect === false;              me.setValue(this.fillDateTime(new Date(t.dateValue))); // overwrite: fill time before setValue              delete me.doCancelFocus;              me.fireEvent('select', me, me.value);              if(handler) {                  handler.call(me.scope || me, me, me.value);              }              me.onSelect();          }      },      // overwrite : fill time before setValue      selectToday: function() {          var me = this,              btn = me.todayBtn,              handler = me.handler;          if(btn && !btn.disabled) {              // me.setValue(Ext.Date.clearTime(new Date())); //src              me.setValue(new Date());// overwrite: fill time before setValue              me.fireEvent('select', me, me.value);              if(handler) {                  handler.call(me.scope || me, me, me.value);              }              me.onSelect();          }          return me;      }  });

2、引用日期時分秒選取器datetimepicker，將日期datefield組件擴充成日期時分秒datetimefield組件：

Ext.Loader.setConfig({enabled:true});Ext.Loader.setPath('MyApp', '../houtai/js');Ext.define('MyApp.ux.DateTimeField', {      extend: 'Ext.form.field.Date',      alias: 'widget.datetimefield',      requires: ['MyApp.ux.DateTimePicker'],      initComponent: function() {          this.format = this.format;          this.callParent();      },      // overwrite      createPicker: function() {          var me = this,              format = Ext.String.format;          return Ext.create('MyApp.ux.DateTimePicker', {                ownerCt: me.ownerCt,                renderTo: document.body,                floating: true,                hidden: true,                focusOnShow: true,                minDate: me.minValue,                maxDate: me.maxValue,                disabledDatesRE: me.disabledDatesRE,                disabledDatesText: me.disabledDatesText,                disabledDays: me.disabledDays,                disabledDaysText: me.disabledDaysText,                format: me.format,                showToday: me.showToday,                startDay: me.startDay,                minText: format(me.minText, me.formatDate(me.minValue)),                maxText: format(me.maxText, me.formatDate(me.maxValue)),                listeners: {                    scope: me,                    select: me.onSelect                },                keyNavConfig: {                    esc: function() {                        me.collapse();                    }                }            });      }  });

3、在form中使用xtype：datetimefield，首先引入擴充類：

requires:'MyApp.ux.DateTimeField',

具體使用：

{                                xtype:'datetimefield',                                width : 300,                                labelWidth : 80,                                endDateField:'etime',                                vtype:'daterange',                                fieldLabel: '記錄時間下限',                                format: 'Y-m-d H:i:s ',                                name:'stime'                            },                            {                                xtype:'datetimefield',                                width : 300,                                labelWidth : 80,                                startDateField:'stime',                                vtype:'daterange',                                fieldLabel: '記錄時間上限',                                format: 'Y-m-d H:i:s ',                                name:'etime'                            },

4、頁面效果：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1521041G2-0.jpg" style="float:none;" title="1.jpg" />

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/15210430Z-1.jpg" style="float:none;" title="2.jpg" />

5、使用體驗：

可實現日期時分秒的選擇輸入，但操作體驗略差強人意。如：選取器上只有'現在'按鈕,若增加‘確定’按鈕，點擊後選取器消失，日期時分秒值填入框體就好了。現在選非'現在'的精確時間，最後需以點擊日期結束，框體中的年月日時分秒才與選取器中完全一致。