时间戳

首页 > 解决方案 > 更改事件之前的 extjs 无线电组

extjs - 更改事件之前的 extjs 无线电组

问题描述

在更改/检查 ExtJS radiogroup 上的事件之前，您能帮我吗？我希望在根据条件更改单选按钮之前检查一些事件。如果条件为 false，我需要允许用户更改选择另一个单选按钮，然后我们只需要选择旧单选按钮。

请参考以下代码：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'RadioGroup Example',
            width: 300,
            height: 125,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'radiogroup',
                fieldLabel: 'Gender',
                columns: 1,
                items: [{
                    boxLabel: 'Male',
                    name: 'rb',
                    inputValue: '1'
                }, {
                    boxLabel: 'Female',
                    name: 'rb',
                    inputValue: '2',
                }],
                listeners: {
                    change: function(field, newValue, oldValue, eOpts) {
                        console.log(newValue);
                        alert(newValue.rb);
                    },
                }
            }]
        });
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/32fb

标签： extjsextjs5

解决方案

如评论中所述，没有任何beforechange事件可用于否决更改。

其他一些选项是：

  • 您可以让change听众验证无线电组，如果选择了不正确的选项，则使其无效。通过这种方式，用户被动地被告知存在问题，他们必须修复它。

  • 您可以通过使用oldvalue参数获得您描述的行为，并将无线电控制设置回旧值：

change: function(field, newValue, oldValue, eOpts) {
  if (<new value isn't acceptable>) {
     // Probably should let the user know why
     field.setValue(oldValue);
     return;
  }
  ... any other change logic here.
}
  • 您还可以change在表单状态更改时抢先使用侦听器启用和禁用选项，从而防止用户首先做出错误的选择。

推荐阅读