ExtJS实时计算一个字段

Question

我的 ExtJS 表单中有一个完成日期字段和一个到期日期字段。当用户选择完成日期时，我希望在选择完成日期后自动填充到期日期。

这是我目前的情况：

        var completionDate = {
                fieldLabel: 'Completion Date',
                xtype: 'datefield',
                submitFormat: 'time',
                name: 'trainingCompletion',
                labelAlign: 'right',
                labelWidth: 150,
                readOnly: false,
                readOnlyCls: 'readOnlyFields',
                listeners: {
                    select: function (dateField, newValue, oldValue){ 
                        expirationDate.oldValue = newValue;
                    }
                },

        };
        var expirationDate = {
                fieldLabel: 'Expiration Date',
                xtype: 'datefield',
                submitFormat: 'time',
                name: 'trainingExpiration',
                labelAlign: 'right',
                labelWidth: 150,
                readOnly: true,
                readOnlyCls: 'iamis_readOnlyFields'
        };

然后该函数应该向 completionDate 添加 15 个月，但我想先更新它

用于声明 trainingCompletion 和 trainingExpiration

的代码

{name: 'trainingCompletion', type: 'date', dateReadFormat: 'time', dateWriteFormat: 'm/d/Y', useNull: true},
{name: 'trainingExpiration', type: 'date', dateReadFormat: 'time', dateWriteFormat: 'm/d/Y', useNull: true},

Answer 1

这看起来不对：

expirationDate.oldValue = newValue

相反，您应该在日期字段上使用正确的 setValue() 方法

expirationDate.setValue(newValue);

Answer 2

提供的代码看起来很不完整。

在声明监听器时，您应该注意监听器将被执行的范围。假设这 2 个日期字段在一个表单上，您应该定义侦听器的范围以保证您将正确引用过期字段。

我在我的代码中做了一些与您类似的事情，所以我将分享一个以我的编程风格执行此操作的代码，但您可以根据自己的编码风格对其进行调整。

Ext.define("My.form.Task", {
    extend: "Ext.form.Panel",
    alias: "widget.mytaskform",
    buttonAlign: "left",
    defaults: {
        anchor: '100%',
        margin: '10px 0px 0px 0px',
        labelAlign: 'left',
        labelWidth: 125
    },
    initComponent: function() {
        this.items = [{
                fieldLabel: 'Completion Date',
                xtype: 'datefield',
                submitFormat: 'time',
                name: 'trainingCompletion',
                labelAlign: 'right',
                labelWidth: 150,
                readOnly: false,
                readOnlyCls: 'readOnlyFields',
                listeners: {
                    select: {
                        scope: this,
                        fn: function (dateField, newValue, oldValue){
                            var expirationField = this.down("[name=trainingExpiration]");
                            // You need to add the desired months to the date
                            // before setting it to the expirationField.
                            expirationField.setValue(newValue);
                        }
                    }
                },

        },{
                fieldLabel: 'Expiration Date',
                xtype: 'datefield',
                submitFormat: 'time',
                name: 'trainingExpiration',
                labelAlign: 'right',
                labelWidth: 150,
                readOnly: true,
                readOnlyCls: 'iamis_readOnlyFields'
        }];
        this.callParent(arguments);
    },
    // form remaining code...
});

ExtJS实时计算一个字段

Calculate a field in real time ExtJS

javascript

jquery

extjs

event-handling