实时计算字段ExtJS

Calculate a field in real time ExtJS

本文关键字：ExtJS 字段 计算 实时      更新时间：2023-09-26

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},

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

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

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

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

这看起来不对：

expirationDate.oldValue = newValue

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

expirationDate.setValue(newValue);
相关文章：