Extjs Устанавливает значение для конечного поля времени относительно ввода в поле времени начала

Question

У меня есть вопрос. У меня есть 2 временных поля в моей форме, startTime и endTime. При выборе времени от startTime мне нужно, чтобы endTime было заполнено значением, которое на 2 часа больше выбранного значения в поле startTime. Может кто-нибудь мне помочь. Я использую ext 4.2 и 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()); 

И я знаю, что это как установить 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(); 
    } 
}); 

См Fiddle здесь: 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 + Формулы для достижения ваших требований. ViewModels являются фундаментальными блоками в ExtJs и помогают вам моделировать, контролировать привязку. Он поддерживает двустороннюю привязку, то есть, если кто-то меняет другой, следует за изменением.

В вашем случае вы можете получить формулу для получения EndTime на основе StartDate, и поскольку эти два являются привязкой к модели, элементы управления автоматически будут следовать за обновлениями в значениях даты.

Посмотрите на этот пример кода я создал, чтобы продемонстрировать 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' 
});