How to calculate date depending on dropdown value and start date in ExtJS?

Question

I want to calculate end date depending on the dropdown list and start date. I use Koala Framework 3.8 (ExtJS 2.3 and Zend 1.12).

If I choose '3' from dropdown and start date is 07.07.2015:

Then end date value becomes 07.08.2015 (+1 month, depending on DB field of '3' value):

I need something that listens to the change event on the combobox/datefield and sets the date dynamically (depending on DB month of combobox with ajax request or another way).

In steps:

1. I set combobox value in form and set start date
2. If 1st step complete values not null select month value from DB (SELECT month from approaches where approachesCount=3 AND ...)
3. Add selected month value from step 2 to start date
4. Put 3rd step date to datefield. I can change this date if needed.

How to do this?

Answer 1

Finally I did it in this way, maybe it can be done better:

var Employees = Ext2.extend(Ext2.Panel,
{
    initComponent : function(test)
    {
        ....
        ....
        //save context
        var controller = this;

        var documents = new Kwf.Auto.GridPanel({
            controllerUrl   : '/employees/documents',
            collapsible     : true,
            stripeRows      : true,
            title           : 'Recurrent training',
            gridConfig: {
                selModel: new Ext2.grid.CheckboxSelectionModel()
            },
            listeners: {
                loaded: function() {
                    //get gripdpanel autoform
                    var autoForm = this.getEditDialog().getAutoForm();

                    //add form render event actions
                    autoForm.on('renderform', function(form) {

                        //get fields
                        var typeId = form.findField('typeId');
                        var startDate = form.findField('startDate');

                        //add select event to ComboBox
                        typeId.on('select', function(typeId, record, index) {
                            //get start date
                            var startDateValue = startDate.getValue();
                            //function call with autoform context
                            controller.changeDateType.call(autoForm, startDateValue, record.data.id);
                        });
                        //add select event to DateField
                        startDate.on('select', function(startDate, date) {
                            //get id type
                            var typeName = typeId.getValue();
                            //function call with autoform context
                            controller.changeDateType.call(autoForm, date, typeName);
                        });
                        //add keyup event to DateField
                        startDate.on('keyup', function(startDate, e) {
                            //if valid
                            if(startDate.isValid()) {
                                //get start date
                                var startDateValue = startDate.getValue();
                                //get id type
                                var typeName = typeId.getValue();
                                //function call with autoform context
                                controller.changeDateType.call(autoForm, startDateValue, typeName);
                            }
                        });
                    });
                }
            }
        });
        ....
        ....
    },
    changeDateType: function(date, type){
        //get end date
        var endDate = this.findField('endDate');

        //if both values not empty
        if(!Ext2.isEmpty(date) && !Ext2.isEmpty(type)){
            //do ajax with:
            //url - catalog url
            //params - id type
            Ext2.Ajax.request({
                url: '/flightchecks/flightcheck/json-load',
                params: { id: type },
                success: function(response, options, result) {
                    //get months from result
                    var months = result.data.months;
                    //create new date and plus returned months
                    var newDate = date.add(Date.MONTH, months);
                    //set new date
                    endDate.setValue(newDate);
                }
            });

        }
    }
});

Answer 2

You can add listeners on combobox and Start Date datefield that listens on change( this, newValue, oldValue, eOpts ) event.

Then check if combobox and Start Date datefield has been chosen. If its true make ajax.request to your server and get value to your End Datedatefield

This is an just example that illustrate one of many solutions(rather pseudo code):

View

Ext.define('YourPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.yourPanel',
    xtype: 'yourPanel',
    items:[{
        xtype: 'combobox',
        itemId: 'approachCountId'
    },{
        xtype: 'datefield',
        itemId: 'dateStartId'
    },{
        xtype: 'datefield',
        itemId: 'dateEndId'
    }]
});

Controller

Ext.define('YourController', {
    extend: 'Ext.app.Controller',
        init: function () {
                var controller = this;
                controller.control({
                'yourPanel combobox#approachCountId': {
                    change: controller.changeEndDateValue
                },'yourPanel combobox#dateStartId': {
                    change: controller.changeEndDateValue
                }
            })
        },
    changeEndDateValue: function(field, newValue, oldValue, eOpts){
        var controller = this;
        //YourCode here to check if combobox value and end date value are not empty. 
        if(!Ext.isEmpty(startDateField) && !Ext.isEmpty(approachCount)){
        //Ajax call
        Ext.Ajax.request({
            method: 'POST',
            url: 'yourUrlToCheck',
            params: {
                approachCount: approachValue,
                startDate: startDateValue
            },
            scope: this,
            success: function (result, response) {
                //if success set value to End Date datefield
            },
            failure: function (result, response) {

            }
        });
       }
    }
});