Extjs 根据开始时间字段中的输入将值设置为结束时间字段

我不是 100% 确定这是否是您要做的，但此代码片段将使用其中一个中设置的值，并将另一个中的值设置为 2 小时后。它还会将最小值设置为所选的开始时间。

Ext.application({
  name : 'Fiddle',
  launch : function() {
    Ext.create('Ext.form.Panel', {
      title: 'Time Card',
      width: 300,
      bodyPadding: 10,
      renderTo: Ext.getBody(),
      items: [
        {
          xtype: 'timefield',
          name: 'in',
          fieldLabel: 'Time In',
          increment: 30,
          anchor: '100%', 
          listeners:{
            select: function(tf, record, eOpts){
              // when selected, we want to use the same functionality as blur or you can change it. 
              tf.fireEvent('blur',tf);
            },
            // this is fired when the value is changed in the start field.
            blur:function(tf, e,eOpts){
              // get the value in the field. 
              var value = tf.getValue();
              // if the value isn't empty, and is valid time. 
              if (value != ''){
                var fullValue = new Date(value),
                hours = fullValue.getHours(),  // get hours 
                minutes = fullValue.getMinutes(); // get minutes
                //create a new datetime object using hours / minutes from selected value
                var timeOut = new Date(); 
                timeOut.setHours(hours+2); 
                timeOut.setMinutes(minutes);
                // get the out and set the value. 
                var timeOutField = tf.up('panel').down('timefield[name=out]');
                timeOutField.setValue(timeOut);
                //set min value to what was in the start time. 
                timeOutField.setMinValue(tf.getValue());
              }
            }
          }
        }, 
        {
          xtype: 'timefield',
          name: 'out',
          fieldLabel: 'Time Out',
          increment: 30,
          anchor: '100%'
        }
      ]
    }).show(); 
  }
});

请参阅此处的小提琴：https://fiddle.sencha.com/#fiddle/16up

考虑到一个面板中有两个时间字段，你只需要监听第一个时间字段的选择事件，并使用组件查询获取第二个时间字段并相应地设置其值。下面是一个工作代码示例：

items: [
    {
        xtype: 'timefield',
        fieldLabel: 'Start Time',
        name: 'sTime',
        editable: false,
        increment: 30,
        anchor: '100%',
        listeners:{
            // This event is fired after user selects a value from drop down menu
            select: function(combo, record, eOpts){
                // Creating Date object according to new Start date
                var dateForNewStartTime = new Date(combo.getValue());
                //create a new datetime object using selected time
                var dateForEndTime = new Date();
                dateForEndTime.setHours(dateForNewStartTime.getHours()+2); // Adding 2 more hours
                dateForEndTime.setMinutes(dateForNewStartTime.getMinutes());
                // Getting and Setting value (you can change this component query according to your requirements)
                var timeOutField = Ext.ComponentQuery.query('timefield[name=eTime]')[0];
                timeOutField.setValue(dateForEndTime);
                // Setting minimum slectable value for End Time field accordingly
                timeOutField.setMinimumValue(combo.getValue());
            }
        }
    },
    {
        xtype: 'timefield',
        fieldLabel: 'End Time',
        name: 'eTime',
        increment: 30,
        editable: false,
        anchor: '100%'
        }
]

您可以使用 ViewModel + Formulas 来实现您的要求。ViewModels 是 ExtJs 中的基本块，可帮助您进行建模、控件绑定。它支持双向绑定，这意味着如果一个更改，另一个更改也会跟随更改。

在您的情况下，您可以使用一个公式来基于 StartDate 派生 EndTime，并且由于这两个是模型绑定，因此控件将自动跟随日期值的更新。

查看我创建的此示例代码，以演示视图模型 + 公式示例用法

此处转载相同内容，以便快速参考

Ext.define('MyApp.view.TimeViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.timeviewmodel',
    data: {
        startTime: new Date(),
        endTime: new Date()
    },
    formulas: {
        getEndDate: function(get){
            console.log(Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2));
            return Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2);
        }
    }
});
Ext.define('dualDatePanel', {
    extend: 'Ext.container.Container',
    viewModel: {
        type: 'timeviewmodel'
    },
    items: [{
        xtype: 'timefield',
        bind: '{startTime}'
    },
           {
        xtype: 'timefield',
        bind: '{getEndDate}'
    }]
});
Ext.create('dualDatePanel', {
    renderTo: Ext.getBody(),
    width: 100,
    height: 32,
    emptyText: 'Binding Failed'
});