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

dayday学习

于 2019-03-31 10:17:41 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： extjs4 文章标签： extjs4 datetimefield

本文链接：https://blog.youkuaiyun.com/weixin_41781408/article/details/88924931

在开发过程中，为了实现DateTimeField增加一个确定按钮，本文介绍了一种解决方案。通过1)创建继承自Ext.form.field.Base的TimePickerField，包含三个NumberField；2)定义DateTimePicker，扩展自Ext.picker.Date，附加TimePicker和确认按钮；3)将DateTimePicker集成到Ext.form.field.Date，设置日期时间格式。最后展示了调用此自定义组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题实在开发时侯遇见的，需要添加一个确定按钮，原来做的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