Extjs Set value to end timefield with respect to input in start timefield

Question

I have a question. I have 2 timeFields in my form, startTime and endTime. On selection of time from startTime I need the endTime to be filled with a value which is 2 hrs greater than the selected value in startTime field. Can anyone help me out. I'm using ext 4.2 and sencha architect.

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());

And I know this is how to set minValue.

timeField uses the default format (1:50 PM) – Sreekanth Mar 10 '16 at 06:28 — Sreekanth, Mar 10 '16 at 06:28

score 0 · Answer 1 · answered Mar 10 '16 at 07:55

I am not 100% sure if this is what you are trying to do but this code snippet will use the value set in one, and set the value in the other to 2 hours later. It will also set the min value to the start time selected.

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

See Fiddle Here: https://fiddle.sencha.com/#fiddle/16up

score 0 · Answer 2 · answered Mar 10 '16 at 12:01

Considering you have two time fields in a panel, you only need to listen to select event of the first time field and get the second time field using component query and set its value accordingly. Here is a working code example:

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

score 0 · Answer 3 · answered Mar 12 '16 at 17:35

You can use ViewModel + Formulas to achieve your requirement. ViewModels are fundamental blocks in ExtJs and help you do model, control binding. It supports two-way binding, meaning if one changes other follows the change.

In your case you can have a formula to derive EndTime based on StartDate and since these two are model binding, the controls will automatically follow the update in date values.

Look at this sample code I've created to demonstrate the ViewModel + Formula example usage

The same is reproduced here for quicker reference

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

Extjs Set value to end timefield with respect to input in start timefield

3 Answers3