Extjs相对于开始时间字段中的输入将值设置为结束时间字段

Question

我有一个问题。 我的表单中有 2 个 timeFields，startTime 和 endTime。在从 startTime 选择时间时，我需要用比 startTime 字段中的选定值大 2 小时的值填充 endTime。 谁能帮我吗。 我正在使用 ext 4.2 和 sencha 架构师。

var win = this.getRfRWindow();
           var form = win.down('form');
           var startTime = win.down('form').down('timefield[name=sTime]');
           var endTime = win.down('form').down('timefield[name=eTime]');
           endTime.clearValue();
           endTime.setMinValue(startTime.getValue());

我知道这是设置 minValue 的方法。

Answer 1

我不能 100% 确定这是否是您要尝试做的，但此代码 sn-p 将使用其中一个设置的值，并将另一个中的值设置为 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

Answer 2

假设面板中有两个时间字段，您只需要监听第一个时间字段的select 事件，并使用component query 获取第二个时间字段并相应地设置其值。 这是一个工作代码示例：

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%'
        }
]

Answer 3

您可以使用 ViewModel + 公式来满足您的要求。 ViewModel 是 ExtJs 中的基本块，可帮助您进行模型、控件绑定。它支持双向绑定，这意味着如果一个更改另一个跟随更改。

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

查看我创建的用于演示 ViewModel + Formula example 用法的示例代码

为了方便参考，这里转载了同样的内容

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'
});