Question

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

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

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

我需要能够侦听组合框/日期字段上的更改事件并动态设置日期（取决于使用ajax请求或其他方式的组合框的月份）。

分步骤：

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

怎么做？

Answer 1

您可以在combobox和开始日期 datefield上添加侦听change( 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);
                }
            });

        }
    }
});

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

2 个答案: