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

        }
    }
});