RadioGroup未更新绑定值

问题描述

我在表单中使用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:',{
            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将更新其值。键入displayfield时，textfield的值会更新，但是radiogroup不会更新。

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

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

以下是有关Sencha fiddle的示例：https://fiddle.sencha.com/#view/editor&fiddle/389i

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

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

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

以下是应用了此更新的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/389k

解决方法

今年早些时候我遇到了这个问题，但是我认为我从来没有向Sencha报告过这个问题，因为我使用的是Community Edition。无论如何，根据我的回忆，我已经在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
    }
});

我确定这不是执行此替代操作的正确方法，但暂时阻止了我的访问。不确定是否对您有用，但我想分享。

我已经联系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,oldVal);
            isValid = me.validate();

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

应用此替代项的小提琴：https://fiddle.sencha.com/#fiddle/38as

问题在于键入，文本字段返回字符串，广播组使用数字..反之，您将不得不使用肮脏的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:',{
            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
                } 
            }
        }]
    }]
});

extjs extjs7 radio-group