RadioGroup 不更新绑定值

Question

我在表单中使用了radiogroup，我注意到当我选择其中一个单选按钮时，值（绑定值）没有更新。

这是一个小例子：

Ext.create({
    xtype: 'container',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'formpanel',
        viewModel: {
            data: {
                myValue: 3
            }
        },
        items: [{
            xtype: 'displayfield',
            label: 'This is the value of myValue:',
            bind: '{myValue}'
        }, {
            xtype: 'textfield',
            label: 'Update myValue:',
            bind: '{myValue}'
        }, {
            xtype: 'radiogroup',
            vertical: true,
            label: 'Click a radio button:',
            bind: '{myValue}',
            items: [{
                label: 'One',
                value: 1
            }, {
                label: 'Two',
                value: 2
            }, {
                label: 'Three',
                value: 3
            }, ]
        }]
    }]
});

我用一个数据值创建了一个简单的viewModel：myValue: 3。这绑定到所有表单元素：radiogroup、textfield 和 displayfield。

我希望当我单击其中一个单选按钮时，displayfield 会更新其值。当您输入textfield 时，displayfield 值会更新，但radiogroup 不会更新。

似乎radiogroup 仅在初始化时使用其绑定值，但它不会注意到何时更新，也不会自行更新。

我做错了什么？为什么单击单选按钮时绑定值没有更新？

这是 Sencha Fiddle 上的一个示例：https://fiddle.sencha.com/#view/editor&fiddle/389i

---

更新：我找到了一个将change 监听器添加到radiogroup 的解决方案。好吧，这修复了在您单击单选按钮时更新myValue 的问题。当myValue 在其他地方更新时（例如在textfield 中），我需要另一个侦听器来更新radiogroup。

这可以满足我的需要，但为什么我需要添加一个change 监听器？为什么radiogroup 不能正确绑定到{myValue}？

listeners: {
    change: function(field, val) {
        let vm = field.lookupViewModel();
        vm.set('myValue', val);
    }
}

这是应用此更新的一个小技巧：https://fiddle.sencha.com/#view/editor&fiddle/389k

Answer 1

问题在于打字，文本字段返回字符串，无线电组使用数字..反之亦然，您将不得不使用肮脏的黑客.. :-/

Ext.create({
    xtype: 'container',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'formpanel',
        viewModel: {
            data: {
                myValue: "3" // type string
            }
        },
        items: [{
            xtype: 'displayfield',
            label: 'This is the value of myValue:',
            bind: '{myValue}'
        }, {
            xtype: 'textfield',
            label: 'Update myValue:',
            bind: '{myValue}'
        }, {
            xtype: 'radiogroup',
            vertical: true,
            label: 'Click a radio button:',
            bind: '{myValue}',
            simpleValue: true,
            items: [{
                label: 'One',
                value: "1" // type string
            }, {
                label: 'Two',
                value: "2" // type string
            }, {
                label: 'Three',
                value: "3" // type string
            }],
            listeners: {
                change: function(radioGroup, newValue, oldValue) {
                    this.up('formpanel').getViewModel().set('myValue', newValue); // Dirty hack
                } 
            }
        }]
    }]
});

Answer 2

我在今年早些时候遇到了这个问题，但我想我从来没有向 Sencha 报告过，因为我使用的是社区版。无论如何，据我回忆，我已将其归结为 getValue 方法中的某个问题，信不信由你，并将其覆盖为以下 (Fiddle here)：

Ext.define('MyOverride', {
    override: 'Ext.field.RadioGroup',

    getValue: function () {
        var value = this.callParent(arguments);
        var bind = this.getBind()
        var bindValue = bind && bind.value;
        if (bindValue) {
            if (Ext.isEmpty(value) && !Ext.isEmpty(bindValue.getValue())) {
                value = bindValue.getValue()
            }
            bindValue.setValue(value)
        }
        return value
    }
});

我确定这不是此覆盖的正确方法，但它暂时解除了对我的阻止。不确定它是否对你有用，但我想分享一下。

Answer 3

我已联系 Sencha 支持（代表我工作的公司；我们有“高级支持”）。他们说已经有一个打开的错误报告（EXTJS-28689），他们提供了一个“非官方”的覆盖来解决这个问题。

Ext.define(null, {
    override: 'Ext.field.FieldGroupContainer',

    onGroupChange: function () {
        var me = this,
            newVal, oldVal, isValid;

        if (me.isConfiguring || me.isDestructing() || me.suspendCheckChange) {
            return;
        }

        newVal = me.getValue();
        oldVal = me.lastValue || me.originalValue;

        if (!me.isEqual(newVal, oldVal)) {
            me.lastValue = newVal;
            me.fireEvent('change', me, newVal, oldVal);
            isValid = me.validate();

            if (isValid) {
                me.publishState('value', newVal);
            }
        }
    }
});

应用此覆盖：https://fiddle.sencha.com/#fiddle/38as