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&小提琴/389i

---

UPDATE：我找到了一个在radiogroup中添加change侦听器的解决方案。好吧，这修复了当你点击单选按钮时更新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&小提琴/389k

Answer 1

今年早些时候我遇到了这个问题，但我想我从来没有向Sencha报告过，因为我使用的是社区版。无论如何，根据我的记忆，我已经追踪到getValue方法中的一些问题，信不信由你，并将其改写为以下内容(此处为Fiddle(：

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 2

我已经联系了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

Answer 3

问题在于键入，文本字段返回字符串，而无线电组使用数字。。反之亦然，你将不得不使用肮脏的黑客..：-/

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