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

Question

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

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

然后结束日期值变为 07.08.2015(+1 个月，取决于“3”值的数据库字段):

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

步骤:

1. 我在表单中设置组合框值并设置开始日期
2. 如果第一步的完整值不为空，则从数据库中选择月份值(从MethodsCount=3 AND ...的方法中选择月份)
3. 将第 2 步中选定的月份值添加到开始日期
4. 将第三步日期放入日期字段。如果需要，我可以更改此日期。

如何做到这一点？

Answer 1

您可以在 combobox 和 Start Date datefield 上添加监听器，监听 change( this, newValue, oldValue, eOpts ) 事件。

然后检查是否已选择组合框和开始日期日期字段。如果为真，请向您的服务器发出 ajax.request 并获取您的结束日期日期字段

的值

这只是一个示例，说明了许多解决方案之一(而不是伪代码):

查看

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

            }
        });
       }
    }
});