RadioGroup 不更新绑定值

Question

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

这是一个小例子：

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

这是应用了此更新的 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/389k

Answer 1

问题在于打字、文本字段 returns 字符串和使用数字的无线电组。反之亦然，您将不得不使用肮脏的 hack.. :-/

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

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

RadioGroup 不更新绑定值

RadioGroup not updating bound value

extjs

radio-group

extjs7