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

在开发过程中,为了实现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 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值