/** * Project  : AMDA-NG * Name : IntervalUI.js * @class amdaUI.IntervalUI * @extends Ext.container.Container * @brief common component to select interval * @author Benjamin * @version $Id: IntervalUI.js 2077 2014-02-11 11:33:36Z elena $ * @todo Validations ***************************************************************************** * FT Id : Date : Name - Description ****************************************************************************** */ Ext.define('amdaUI.IntervalUI', { extend: 'Ext.container.Container', alias: 'widget.intervalSelector', activeField : null, constructor: function(config) { this.init(config); this.callParent(arguments); }, setInterval : function(startDate,stopDate) { // get the search form var form = this.findParentByType('form').getForm(); // get start field var startField = form.findField('startDate'); // get stop field var stopField = form.findField('stopDate'); if (startField != null) startField.setValue(startDate); if (stopField != null) stopField.setValue(stopDate); this.updateDuration(); }, getStartTime : function() { // get the search form var form = this.findParentByType('form').getForm(); // get start field var startField = form.findField('startDate'); return startField.getValue(); }, getStopTime : function() { // get the search form var form = this.findParentByType('form').getForm(); // get stop field var stopField = form.findField('stopDate'); return stopField.getValue(); }, updateDuration: function() { // get the search form var form = this.findParentByType('form').getForm(); // get start value var start = form.findField('startDate').getValue(); // get stop value var stop = form.findField('stopDate').getValue(); // if duration computable if (stop != null && start != null) { // compute offset var zoneOffset = stop.getTimezoneOffset() - start.getTimezoneOffset(); // compute duration var diff = stop - start - zoneOffset*60000; var durationDays = Math.floor(diff/86400000); // set all duration values form.findField('durationDay').setValue(Ext.String.leftPad(durationDays,4,'0')); form.findField('durationHour').setValue(Ext.String.leftPad(Math.floor(diff/3600000 % 24),2,'0')); form.findField('durationMin').setValue(Ext.String.leftPad(Math.floor(diff/60000 % 60),2,'0')); form.findField('durationSec').setValue(Ext.String.leftPad(Math.floor(diff/1000 % 60),2,'0')); if (durationDays > 9999) { form.findField('durationDay').markInvalid('Maximum interval is 9999 days!'); } } }, isValidDuration: function(){ // get the time form var form = this.findParentByType('form').getForm(); // get global validation status for duration fields return ( form.findField('durationDay').isValid() && form.findField('durationHour').isValid() && form.findField('durationMin').isValid() && form.findField('durationSec').isValid() );// return true if all duration fields are Valid false otherwise }, updateStop: function() { // get the time form var form = this.findParentByType('form').getForm(); // get duration value var duration = parseInt(form.findField('durationDay').getValue(),10)*86400 + parseInt(form.findField('durationHour').getValue(),10)*3600 + parseInt(form.findField('durationMin').getValue(),10)*60 + parseInt(form.findField('durationSec').getValue(),10); // get start value var start = form.findField('startDate').getValue(); // compute stop value var stop = Ext.Date.add(start,Ext.Date.SECOND,duration); // set stop value into form form.findField('stopDate').setValue(stop); }, onChangeStartField : function(field, newValue, oldValue) { if (field.isValid()) { // get the search form var form = this.findParentByType('form').getForm(); // set to the stop datefield the newValue as minValue form.findField('stopDate').setMinValue(newValue); // if it's a user modification if (oldValue != null && this.activeField == 'start') { // launch the update of duration fields this.updateDuration(); } } }, onChangeStopField: function(field, newValue, oldValue){ if (field.isValid() && oldValue != null && this.activeField == 'stop') { // launch the update of duration fields this.updateDuration(); } }, getDateField : function(fieldName,fieldText,fieldId,onChangeField) { return { layout: {type: 'hbox', align: 'middle'}, items: [ { xtype: 'datefield', name: fieldName, format: 'Y/m/d H:i:s', enforceMaxLength : true, maxLength: 19, fieldLabel: fieldText, labelAlign: 'right', labelWidth: 60, listeners: { change: onChangeField, focus: function(field) { this.activeField = fieldId; }, scope : this } } ] }; }, getStartField : function() { return this.getDateField('startDate','Start Time','start',this.onChangeStartField); }, getStopField : function() { return this.getDateField('stopDate','Stop Time','stop',this.onChangeStopField); }, getDurationField : function() { return { layout: {type: 'hbox', align: 'middle'}, height: 45, defaults: { xtype: 'textfield', labelAlign: 'top', width: 30, allowBlank: false, maxLength:2, enforceMaxLength : true, hideTrigger: true, regex: /^[0-9]([0-9])*$/i, listeners: { change: function(field, newValue, oldValue){ if (this.isValidDuration() && oldValue != null && this.activeField == 'duration') { // launch the update of stop datefield this.updateStop(); } }, focus: function(field) { this.activeField = 'duration'; }, scope : this } }, items:[ { xtype: 'displayfield', labelWidth: 60, labelAlign: 'right', width: 60, fieldLabel: '
Duration'}, { xtype: 'component', width: 5}, { name: 'durationDay', fieldLabel: 'Days', width: 45, maxLength: 4}, { xtype: 'component', width: 5}, { name: 'durationHour', fieldLabel: 'Hrs'}, { xtype: 'component', width: 5}, { name: 'durationMin', fieldLabel: 'Mins'}, { xtype: 'component', width: 5}, { name: 'durationSec', fieldLabel: 'Secs'} ] }; }, init : function(config) { var me = this; var myConf = { border: false, plain: true, flex: 1, layout: 'anchor', defaults: { height : 30, xtype : 'container'}, items: [ me.getStartField(), me.getStopField(), me.getDurationField() ] }; Ext.apply (this , Ext.apply (arguments, myConf)); } });