ExtJS 4 RadioGroup 更改事件触发两次

发布于 2025-01-04 13:30:53 字数 1247 浏览 1 评论 0原文

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

有没有一种方法可以侦听对 RadioGroup 或具有相同名称的无线电的更改，并且仅触发一次？根据我使用 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');
}

原文

I'm using ExtJS 4.0.7, am new to Ext, and am using the new MVC architecture. I have a RadioGroup that, upon change, I want to use to reveal more UI elements. The problem is, that the change event fires twice for the RadioGroup. I'm assuming this is because both Radios fire an event for having their values change.

Is there a way to listen for a change to either the RadioGroup or Radios with the same name that will fire only once? In my experience with jQuery and Flex, I would expect a RadioGroup to only fire once.

Here's the RadioGroup code in my view:

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

Here's the relevant code in my Controller:

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

澜川若宁 2025-01-11 13:30:53

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 选择将是新值。我知道它不能解决两个事件触发问题，但希望这会有所帮助！

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

evant says this will be fixed with 4.1, so it's definitely a bug.

However, you can deal with the situation pretty easily:

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

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

}

var selection will be the new value. I know it doesn't solve the two event firing problem, but hopefully this helps!

回复收藏 0 原文

何时共饮酒 2025-01-11 13:30:53

它触发两次的原因是因为您的无线电组发生了两次更改。

单选按钮从 checked=true 更改为 checked=false，然后您新单击的单选按钮从 checked=false 更改为 检查= true 。这确实应该是一件值得期待的事情。

如果您想在单选按钮不再被选中时执行某些操作该怎么办？你会错过整个活动。实际上，您应该只检查侦听器函数，以仅侦听具有 checked=true 的单选按钮。

回复收藏 0 原文

梦里寻她 2025-01-11 13:30:53

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

回复收藏 0 原文

小巷里的女流氓 2025-01-11 13:30:53

试试这个：

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

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

谢谢
纳根德拉

Try this:

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

Here myTransitionsRadio in my case, is the common name given to all radio buttons.

Thanks
Nagendra

回复收藏 0 原文

~没有更多了~