Question

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

timeit

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

Answer 1

我不是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

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 + Formulas来满足您的要求。 ViewModels是ExtJs中的基本块，可帮助您进行模型化，控制绑定。它支持双向绑定，这意味着如果更改后的其他更改。

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

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

此处转载同样的内容以便更快地参考

searched_Tool_id = Tool_Id_txtBx.Text.ToString();

Extjs将值设置为关于开始时间域中的输入的结束时间段

3 个答案: