ExtJS 4，无线电组总是“脏”的问题

Question

我在表单中使用一个非常简单的 RadioGroup。我的表单通过 form.loadRecord() 方法填充了一条记录，稍后我使用 form.updateRecord() 根据表单中的值更新记录。它有效，我可以加载记录并保存它们，此时没有问题。

当我想使用 isDirty() 方法检查表单的脏状态时，就会出现问题。它始终是“真实的”。我基本上知道为什么，那是因为 RadioGroup 的原始值始终等于“0”，并且不是由 loadRecord() 设置的（它只是将值应用于临时无线电组的子级）。

-> form.getFields().items[10].originalValue = 评级：“0”

-> form.getFields().items[10].getValue() = 评级：“3”

我应该补充一点，其他字段都不是脏的（trackResetOnLoad 在表单上设置为 true，这允许在加载记录时重置表单）。此问题仅发生在无线电组中。

这是我使用的无线电组的代码。我尝试将“名称：‘评级’”添加到无线电组，但它崩溃了（显然它在 ExtJS 3.x 中工作）。

xtype : 'radiogroup',
fieldLabel: 'Rating',
items: [
    {
        boxLabel  : 'Zero',
        name      : 'Rating',
        inputValue: "0"
    }, {
        boxLabel  : 'One',
        name      : 'Rating',
        inputValue: "1"
    }, {
        boxLabel  : 'Two',
        name      : 'Rating',
        inputValue: "3"
    }
]

感谢您的帮助！

Answer 1

这只是表单的一般行为，显然默认情况下表单没有字段值，当您加载数据时，它显然会发生变化并使表单变脏。

当我不得不依赖 isDirty() 方法时，我手动重置了表单字段的值...

Ext.getCmp('fieldId').resetOriginalValue();Ext.getCmp('fieldId').resetOriginalValue();

虽然这不是修复，但作为临时解决方法应该可以。看起来这可能是一个错误，可能值得在 Sencha 论坛上发布

Answer 2

截至 4.0.7 版本，这仍然是一个错误。这是一个简短的覆盖来修复它：

Ext.override(Ext.form.field.Radio, {
    resetOriginalValue: function () {
        //Override the original method inherited from Ext.form.field.Field: 
        //  this.originalValue = this.getValue();
        //  this.checkDirty();
        this.getManager().getByName(this.name).each(function (item) {
            item.originalValue = item.getValue();
            item.checkDirty();
        });
    }
});

（您还可以在此处阅读 Sencha 论坛线程中的讨论和我的原始回复：http://www.sencha.com/forum/showthread.php?182524-RadioField-and-isDirty-problem&p=745308&viewfull=1#post745308)

研究/细节：

从 Ext.form.Basic、setValues 方法的源代码开始。 setValues 方法内部有一个辅助函数 setVal，如下所示：

function setVal(fieldId, val) {
    var field = me.findField(fieldId);
    if (field) {
        field.setValue(val);
        if (me.trackResetOnLoad) {
            field.resetOriginalValue();
        }
    }
}

您可以看到它根据给定的 fieldId（字段名称）在找到的第一个字段上调用 setValue，然后调用 ResetOriginalValue。让我们看一下 Ext.form.field.Radio 中的 setValue：

setValue: function(v) {
    var me = this,
        active;

    if (Ext.isBoolean(v)) {
        me.callParent(arguments);
    } else {
        active = me.getManager().getWithValue(me.name, v).getAt(0);
        if (active) {
            active.setValue(true);
        }
    }
    return me;
}

这个专门的 setValue 方法考虑到存在多个具有相同名称的无线电，并且仅在其中一个无线电上调用 setValue (通过在基本表单的 setValues 中调用 findField 找到的第一个）。

因此，无线电领域的 setValue 已变得“智能”。现在，无线电字段的resetOriginalValue 怎么样？从未实现过专门用于无线电字段的 ResetOriginalValue - 它只是从 Ext.form.field.Field 中的默认值继承，如下所示：

resetOriginalValue: function() {
    this.originalValue = this.getValue();
    this.checkDirty();
}

修复方法是使无线电的 ResetOriginalValue 与它们的 setValue 一样“智能”，即考虑到单选组中有多个同名的单选字段。