关于extjs4 自定义datetimefield 添加一个确定按钮

这个问题实在开发时侯遇见的，需要添加一个确定按钮，原来做的datetimefield就只有一个现在的按钮。非常感谢网上的大佬和之前开发的前辈。直接上代码了。
1、自定义一个时间选择器TimePickerField，继承自Ext.form.field.Base，由三个NumberField组成。

---

Ext.define('common.util.timeFeld.TimePickerField', {
  extend: 'Ext.form.field.Base',
  alias: 'widget.timepicker',
  alternateClassName: 'Ext.form.field.TimePickerField',
  requires: ['Ext.form.field.Number'],
  // 隐藏BaseField的输入框 , hidden basefield's input
  inputType: 'hidden',
  style: 'padding:4px 0 0 0;margin-bottom:0px',
  /**
   * @cfg {String} value
   * initValue, format: 'H:i:s'
   */
  value: null,
  /**
  * @cfg {Object} spinnerCfg
  * 数字输入框参数, number input config
  */
  spinnerCfg: {
      width: 60
  },
  /** Override. */
  initComponent: function() {
      var me = this;
      me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');
      me.callParent();// called setValue
      me.spinners = [];
      var cfg = Ext.apply({}, me.spinnerCfg, {
            readOnly: me.readOnly,
            disabled: me.disabled,
            style: 'float: left',
            listeners: {
                change: {
                    fn: me.onSpinnerChange,
                    scope: me
                }
            }
        });
      me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
              minValue: 0,
              maxValue: 23
          }));
      me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
              minValue: 0,
              maxValue: 59
          }));
      // TODO 使用timeformat 判断是否创建秒输入框, maybe second field is not always need.
      me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
              minValue: 0,
              maxValue: 59
          }));
      me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);
  },
  /**
      * @private
      * Override.
      */
  onRender: function() {
      var me = this, spinnerWrapDom, spinnerWrap;
      me.callParent(arguments);
      // render to original BaseField input td
      // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
      spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
      spinnerWrap = Ext.get(spinnerWrapDom);
      me.callSpinnersFunction('render', spinnerWrap);
      Ext.core.DomHelper.append(spinnerWrap, {
            tag: 'div',
            cls: 'x-form-clear-left'
        });
      this.setRawValue(this.value);
  },
  _valueSplit: function(v) {
      if(Ext.isDate(v)) {
          v = Ext.Date.format(v, 'H:i:s');
      }
      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.getValue(), this.getRawValue());
  },
  // 依次调用各输入框函数, call each spinner's function
  callSpinnersFunction: function(funName, args) {
      for(var i = 0; i < this.spinners.length; i++) {
          this.spinners[i][funName](args);
      }
  },
  // @private get time as object,
  getRawValue: function() {
      if(!this.rendered) {
          var date = this.value || new Date();
          return this._valueSplit(date);
      } else {
          return {
              h: this.hoursSpinner.getValue(),
              m: this.minutesSpinner.getValue(),
              s: this.secondsSpinner.getValue()
          };
      }
  },
  // private
  setRawValue: function(value) {
      value = this._valueSplit(value);
      if(this.hoursSpinner) {
          this.hoursSpinner.setValue(value.h);
          this.minutesSpinner.setValue(value.m);
          this.secondsSpinner.setValue(value.s);
      }
  },
  // overwrite
  getValue: function() {
      var v = this.getRawValue();
      return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
        + Ext.String.leftPad(v.s, 2, '0');
  },
  // overwrite
  setValue: function(value) {
      this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;
      if(!this.rendered) {
          return;
      }
      this.setRawValue(this.value);
      this.validate();
  },
  // overwrite
  disable: function() {
      this.callParent(arguments);
      this.callSpinnersFunction('disable', arguments);
  },
  // overwrite
  enable: function() {
      this.callParent(arguments);
      this.callSpinnersFunction('enable', arguments);
  },
  // overwrite
  setReadOnly: function() {
      this.callParent(arguments);
      this.callSpinnersFunction('setReadOnly', arguments);
  },
  // overwrite
  clearInvalid: function() {
      this.callParent(arguments);
      this.callSpinnersFunction('clearInvalid', arguments);
  },
  // overwrite
  isValid: function(preventMark) {
      return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
        && this.secondsSpinner.isValid(preventMark);
  },
  // overwrite
      validate: function() {
          return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();
      }
  });

2、自定义一个DateTimePicker，继承自Ext.picker.Date，实际上就是在原有的DateField的基础上增加TimePicker和一个确认按键。

Ext.define('common.util.timeFeld.DateTimePicker', {
extend: 'Ext.picker.Date',
alias: 'widget.datetimepicker',
todayText: '确认',
timeLabel: '时间',
width: 300,
requires: ['common.util.timeFeld.TimePickerField'],

        todayText: '现在',
        timeLabel: '时间',
        buttonText: '确定',
        width: 300,
        initComponent: function() {
            this.callParent();
            this.value = this.value || new Date();
        },
        onRender: function(container, position) {
            this.callParent(arguments);
            var me = this;


            //确认按键
            var btnCfg = Ext.apply({}, {}, {
                style: 'center',
                listeners: {
                    click: {
                        fn: function(){
                            this.confirmDate();
                        },
                        scope: me
                    }
                }
                });
            me.confirmBtn = Ext.create('Ext.Button', Ext.apply({}, btnCfg, {
                text: '确认',
            }));
            me.confirmBtn.render(this.el.child('div div.x-datepicker-footer'));


            if(!this.timefield) {
                this.timefield = Ext.create('common.util.timeFeld.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);//

            var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));

            var tfEl = Ext.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) {
            this.value = this.fillDateTime(this.value);
        },
        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;
        },
        changeTimeFiledValue: function(value) {
            this.timefield.un('change', this.timeChange, this);
            this.timefield.setValue(this.value);
            this.timefield.on('change', this.timeChange, this);
        },
        setValue: function(value) {
            this.value = value;
            this.changeTimeFiledValue(value);
            return this.update(this.value);
        },
        getValue: function() {
            return this.fillDateTime(this.value);
        },
        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)));
                delete me.doCancelFocus;
                me.fireEvent('select', me, me.value);
                if(handler) {
                handler.call(me.scope || me, me, me.value);
                }
                me.onSelect();
            }
        },
        //确认按键 
        confirmDate: function(){
                var that = this;
                    that.fireEvent('select', that, that.value);//模拟用户选择
                    that.onSelect();
        },
        selectToday: function() {
            var me = this,
                btn = me.todayBtn,
                handler = me.handler;
            if(btn && !btn.disabled) {
                me.setValue(new Date());
                me.fireEvent('select', me, me.value);
                if(handler) {
                handler.call(me.scope || me, me, me.value);
                }
                me.onSelect();
            }
            return me;
        }

    });

3、将DateTimePicker装载到Ext.form.field.Date中，初始化日期时间的格式。

Ext.Loader.setConfig({enabled:true});
//Ext.Loader.setPath('MyApp', '../houtai/js');
Ext.define('common.util.timeFeld.DateTimeField', {
  extend: 'Ext.form.field.Date',
  alias: 'widget.datetimefield',
  requires: ['common.util.timeFeld.DateTimePicker'],
            initComponent: function() {
                this.format = this.format;
                this.callParent();
            },
            format: 'Y-m-d H:i:s',
            createPicker: function() {
                var me = this,
                        format = Ext.String.format;
                return Ext.create('common.util.timeFeld.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();
                                }
                        }
                    });
            }
    });

最终 调用这个就行了。