ExtJS 4 RadioGroup 更改事件触发两次答案

【问题标题】：ExtJS 4 RadioGroup Change Event Fires TwiceExtJS 4 RadioGroup 更改事件触发两次
【发布时间】：2012-02-10 14:40:55
【问题描述】：

我正在使用 ExtJS 4.0.7，是 Ext 的新手，并且正在使用新的 MVC 架构。我有一个 RadioGroup，在更改后，我想用它来显示更多 UI 元素。问题是，RadioGroup 的 change 事件触发了两次。我假设这是因为两个 Radios 都会触发一个事件以改变它们的值。

有没有办法监听 RadioGroup 或同名的 Radios 的更改，但只会触发一次？根据我使用 jQuery 和 Flex 的经验，我希望 RadioGroup 只触发一次。

这是我认为的 RadioGroup 代码：

items: [{
    xtype: 'radiogroup',
    id: 'WheatChoice',
    padding: '',
    layout: {
        padding: '-3 0 4 0',
        type: 'hbox'
    },
    fieldLabel: 'Choose Model',
    labelPad: 5,
    labelWidth: 80,
    allowBlank: false,
    columns: 1,
    flex: 1,
    anchor: '60%',
    items: [
        { xtype: 'radiofield', id: 'SpringWheat', padding: '2 10 0 0', fieldLabel: '', 
          boxLabel: 'Spring', name: 'wheat-selection', inputValue: '0', flex: 1 },
        { xtype: 'radiofield', id: 'WinterWheat', padding: '2 0 0 0', fieldLabel: '',
          boxLabel: 'Winter', name: 'wheat-selection', inputValue: '1', checked: true, flex: 1 }
     ]
}]

这是我的控制器中的相关代码：

init: function() {
     this.control({
         '#WheatChoice': {
            change: this.onWheatChange
         }
     });
},

onWheatChange: function(field, newVal, oldVal) {
    //this fires twice
    console.log('wheat change');
}

【问题讨论】：

已确认 (fiddle)。看起来像一个错误。
这不是一种解决方法。我只创建了该错误的展示。
抱歉，我说的是我发布的内容。这是一种解决方法：将选择器更改为“#WheatChoice radio”并使用事件侦听器中的逻辑来忽略任何不等于 true 的新值。
我发现 radiogroups 和 checkboxgroups 在 4.x beta 中基本上无法使用...最好等待 RTM 版本

标签： extjs extjs4 extjs-mvc

【解决方案1】：

http://www.sencha.com/forum/showthread.php?132176-radiogroup-change-event-fired-twice/page2

evant 说这将在 4.1 中修复，所以这绝对是一个错误。

但是，您可以很容易地处理这种情况：

//borrowing your function
onWheatChange: function(rg, sel) {
    var selection = sel['wheat-selection'];

    if (!(selection instanceof Object)) {
        alert(selection);
    }

}

var selection 将是新值。我知道它不能解决两个事件触发问题，但希望这会有所帮助！

【讨论】：

我接受这个，因为它是一个错误并且解决方法有效。谢谢。

【解决方案2】：

它触发两次的原因是因为您的广播组发生了两个变化。

单选按钮从checked=true 更改为checked=false，然后您新单击的单选按钮从checked=false 更改为checked=true。这确实应该是意料之中的事情。

如果您想在不再选中单选按钮时做某事怎么办？你会错过整个活动。真的，您应该只检查您的侦听器功能以仅侦听具有checked=true 的单选按钮。

【讨论】：

这是我也采用过的解决方案，但我不同意想知道组中的两个单选按钮。理论上，一个 RadioGroup 应该提供一个值和一个事件。

【解决方案3】：

它可能会被触发，因为正在设置初始值并触发事件。尝试添加第三个无线电元素，看看它是否会触发 3 次。

【讨论】：

我在一个不同的电台组中做了这件事，有四个项目。它会发射两次。一次告诉我新选择的单选值发生了变化，一次告诉我旧的单选值更改为checked=false。

【解决方案4】：

试试这个：

change : function(thisFormField, newValue, oldValue, eOpts) {
          if (!Ext.isArray(newValue.myTransitionsRadio)) {
                 // Code goes here.
          }

在我的例子中，myTransitionsRadio 是所有单选按钮的通用名称。

谢谢纳根德拉

【讨论】：