1

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

这是一个小例子：

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. 这绑定到所有表单元素： the radiogroup、 atextfield和 a 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

4

3 回答 3

2

今年早些时候我遇到了这个问题，但我想我从来没有向 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
    }
});

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

于 2020-08-19T03:05:07.207 回答
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

于 2020-08-19T18:23:00.363 回答
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
                } 
            }
        }]
    }]
});
于 2020-08-18T21:28:39.630 回答