javascript - 如何根据 ExtJS 中的下拉值和开始日期计算日期？

Question

我想根据下拉列表和开始日期计算结束日期。我使用 Koala Framework 3.8（ExtJS 2.3 和 Zend 1.12）。

如果我从下拉列表中选择“3”并且开始日期是 07.07.2015：

然后结束日期值变为 07.08.2015（+1 个月，取决于“3”值的 DB 字段）：

我需要一些东西来监听组合框/日期字段上的更改事件并动态设置日期（取决于带有 ajax 请求或其他方式的组合框的数据库月份）。

在步骤：

1. 我在表单中设置组合框值并设置开始日期
2. 如果第一步完成值不为空，则从 DB ( SELECT month from approaches where approachesCount=3 AND ...)中选择月份值
3. 将步骤 2 中选定的月份值添加到开始日期
4. 将第三步日期放入日期字段。如果需要，我可以更改此日期。

这该怎么做？

Answer 1

您可以添加监听器combobox和监听事件的开始日期。 datefieldchange( this, newValue, oldValue, eOpts )

然后检查是否选择combobox了开始日期 datefield。如果它对您的服务器具有真正的影响并ajax.request为您的结束日期带来价值datefield

这是一个示例，说明了许多解决方案之一（而不是伪代码）：

看法

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

控制器

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) {

            }
        });
       }
    }
});

Answer 2

最后我是这样弄的，也许可以做得更好：

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

        }
    }
});