ExtJS 4 RadioGroup Change Event两次爆发

时间:2012-02-10 14:40:56

标签: extjs extjs4 extjs-mvc

我正在使用ExtJS 4.0.7,我是Ext的新手,并且正在使用新的MVC架构。我有一个RadioGroup,改变后,我想用来揭示更多的UI元素。问题是,更改事件会为RadioGroup触发两次。我假设这是因为两个无线电都会激活事件以使其值发生变化。

是否有办法侦听对同一名称只能触发一次的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');
}

4 个答案:

答案 0 :(得分:5)

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

evant说这将用4.1修复,所以它肯定是一个bug。

但是,你可以很容易地处理这种情况:

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

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

}  

var选择将是新值。我知道它并没有解决两个事件发射问题,但希望这有帮助!

答案 1 :(得分:4)

它发射两次的原因是因为你的无线电组发生了两次变化。

单选按钮正在从checked=true更改为checked=false,然后您新点击的单选按钮正在从checked=false更改为checked=true。这应该是一个预期的事情。

如果您不想再检查单选按钮时想要做什么怎么办?你会错过整个活动。实际上,您应该只检查您的侦听器功能,以便只侦听具有checked=true的单选按钮。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

试试这个:

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

在我的情况下,myTransitionsRadio是给所有单选按钮的通用名称。

由于 Nagendra